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

Question

I am trying to build a web app where I am trying to call a function on button click. 我正在尝试构建一个Web应用程序，该应用程序试图在单击按钮时调用一个函数。 I am using react-engine as templating engine using JSX pages. 我正在使用react-engine作为使用JSX页面的模板引擎。 Below is my layout.jsx page 以下是我的layout.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;

i have tried calling the function using both this.props as well as calling directly after binding this to it. 我试过使用this.props调用该函数，以及将其绑定到它之后直接调用。 However, both the approaches did not work. 但是，这两种方法均无效。

Could you please help me with this. 你能帮我这个忙吗？ I am totally stuck here. 我完全被困在这里。

Answer 1

I am assuming you know how to do the react setup thing etc. This is how events are bound and eventually change DOM elements. 我假设您知道如何进行react setup等等。这是事件绑定并最终更改DOM元素的方式。

Problem in your code is you trying to update a property on component this.displayName = "Sourav" and hoping that UI will automatically get updated based on that. 代码中的问题是您试图更新组件this.displayName = "Sourav"的属性，并希望UI将基于该属性自动更新。 But that's not the way React works. 但这不是React的工作方式。 To display changes you need to change a component's state or props (props are set through parent component). 要显示更改，您需要更改组件的state或props （道具是通过父组件设置的）。 Also you don't write head , html body tags etc inside react component. 您也不要在react组件内编写head ， html body标签等。

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 = {
};

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

问题描述

1 个解决方案

解决方案1
1 2016-08-14 13:06:57

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

问题描述

1 个解决方案

解决方案1 1 2016-08-14 13:06:57

解决方案1
1 2016-08-14 13:06:57