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

onClick button event handler not working when using react.js JSX pages

本文关键字：JSX 不起作用 js react 事件处理 按钮 程序 onClick      更新时间：2023-09-26

我试图建立一个web应用程序，我试图调用按钮点击功能。我使用react-engine作为使用JSX页面的模板引擎。下面是我的布局。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;

我已经尝试使用这两个调用函数。Props以及在将this绑定到它之后直接调用。然而，这两种方法都不起作用。

你能帮我一下吗?

我假设你知道如何做的反应设置的东西等。这就是事件绑定和最终改变DOM元素的方式。

问题在你的代码是你试图更新组件this.displayName = "Sourav"的属性，并希望UI将自动得到更新的基础上。但这不是React的工作方式。要显示更改，您需要更改组件的state或props (props通过父组件设置)。你也不要写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 = {
};
相关文章：