обработчик события onClick не работает при использовании страниц jsX react.js

Я пытаюсь создать веб-приложение, где я пытаюсь вызвать функцию при нажатии кнопки. Я использую реактивный движок в качестве шаблонов с использованием JSX-страниц. Ниже моя страница layout.jsxобработчик события onClick не работает при использовании страниц jsX react.js

import React from 'react'; 
import Success from "./components/success.jsx"; 
import ReactDOM from 'react-dom'; 

class Layout extends React.Component { 
    constructor(props) { 
     super(props); 
     this.displayName = 'Layout'; 
     this.state = {data:[]}; 
     //this.arrayHandler = this.arrayHandler.bind(this); 
     this.forceUpdateHandler = this.forceUpdateHandler.bind(this); 
     this.printHandler = this.printHandler.bind(this); 

    } 

    /*function submitter(){ 
     //console.log("in submitter function", user.value); 
    },*/ 
    /*arrayHandler(){ 
     var item = "first item"; 
     var myArray = this.state.data; 
     myArray.push(item); 
     this.setState({data:myArray}) 
    }*/ 

    forceUpdateHandler(){ 
     return this.forceUpdate(); 
    } 

    printHandler(){ 
     return this.displayName = "Sourav"; 
    } 

    render() { 
     return (
      <html> 
       <head> 
        <title>JSX</title> 
       </head> 

       <body> 
        <h1>Welcome to React JSX Page</h1> 
        <div id = "maincontent"> 

         <Message msg = "Displaying message"/> 
         <p id = "para"></p> 
         <Success successMsg = "Transaction successful"/> 
         <h2>Arrays: {this.props.propArray}</h2> 
         <h2>Objects: {this.props.propObject.objectName1}</h2> 

         <input type = "button" onClick = {this.props.propHandler} value = "Add items"/> 
         <h3>State Arrays: {this.state.data}</h3> 

         <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button> 
         <h4>Random number: {Math.random()}</h4> 

         <button onClick = {this.printHandler}>Show name</button> 
         <p>{this.displayName}</p> 

        </div> 
       </body> 

      </html> 
      ); 
    } 
} 

Layout.propTypes = { 
    propArray: React.PropTypes.array.isRequired, 
    propObject: React.PropTypes.object, 
    propHandler: React.PropTypes.func 
} 

Layout.defaultProps = { 
    propArray: [1,2,3,4,5], 
    propHandler: function arrayHandler(){ 
        var item = "first item"; 
        var myArray = this.state.data; 
        myArray.push(item); 
        this.setState({data:myArray}) 
       }, 
    propObject: { 
     objectName1:"objectValue1", 
     objectName2: "objectValue2", 
     objectName3: "objectValue3" 
    } 
} 

class Message extends React.Component{ 
    render(){ 
     return(
      <div> 
       <h2>{this.props.msg}</h2> 
      </div> 
      ) 
    } 
} 



//ReactDOM.render(<Layout/>,); 


export default Layout;

я пытался вызвать функцию, используя оба this.props, а также позвонив непосредственно после связывания этого к нему. Однако оба подхода не сработали.

Не могли бы вы помочь мне в этом. Я полностью застрял здесь.

источник

2016-08-14 Sourav

Какие ошибки вы получаете? Он показывает какие-либо кнопки в браузерах? –

Нет ошибок @PraveenPrasad .. Кнопка не работает. Ничего не придет, если я нажму кнопку. – Sourav

вы делаете 'ReactDOM.render' где-то в каком-то файле? Также покажите HTML-файл, в который вы включаете окончательный сгенерированный пакет. Вы включили '', '' теги и т. Д. В компонент реакции, это не то, как это делается. –

Я предполагаю, что вы знаете, как сделать реакцию на установку и т. Д. Это то, как события связаны и в конечном итоге меняют элементы DOM.

Проблема вашего кода заключается в том, что вы пытаетесь обновить свойство на компоненте this.displayName = "Sourav" и надеетесь, что пользовательский интерфейс будет автоматически обновляться на основе этого. Но это не так, как работает React. Для отображения изменений вам необходимо изменить компонент state или props (реквизиты устанавливаются через родительский компонент). Также вы не пишете head, htmlbody теги и т. Д. Внутри реагирующего компонента.

import React, {PropTypes} from 'react'; 

export default class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.updateName1 = this.updateName1.bind(this); 
    this.updateName2 = this.updateName2.bind(this); 

    this.state = { 
     name1: undefined 
    } 
    } 

    updateName1(){ 
    this.setState({ 
     name1: 'Praveen' 
    }); 
    } 


    updateName2(){ 
    this.name2 = "I won't be updated on UI" 
    } 

    render() { 
    return (<div> 
     <button onClick={this.updateName1}>Update Name1</button> || 
     <button onClick={this.updateName2}>Update Name2</button> 
     <br /> 
     <div> 
     Name1: {this.state.name1} <br /> 
     Name2: {this.name2} <br /> 
     </div> 
    </div>); 
    } 
} 

MyComponent.propTypes = { 
};

источник

2016-08-14 13:06:57

обработчик события onClick не работает при использовании страниц jsX react.js

ответ

Смежные вопросы