使用react.js时，onClick按钮事件处理程序不起作用JSX页面

我正在尝试构建一个Web应用程序，我试图在按钮单击时调用该函数。我正在使用JSX页面使用react-engine作为模板引擎。下面是我layout.jsx页使用react.js时，onClick按钮事件处理程序不起作用JSX页面

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"上的属性，并希望UI将自动根据该属性进行更新。但这不是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

使用react.js时，onClick按钮事件处理程序不起作用JSX页面

回答

相关问题