Question

我正在尝试构建一个Web应用程序，我试图在按钮单击时调用一个函数。我正在使用react-engine作为使用JSX页面的模板引擎。下面是我的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;

我尝试使用this.props调用该函数，并在将其绑定到它之后直接调用。但是，这两种方法都不起作用。

你可以帮我解决这个问题。我完全被困在这里。

Answer 1

我假设您知道如何进行反应设置事务等。这是事件绑定的方式，最终会改变DOM元素。

代码中的问题是您尝试更新组件this.displayName = "Sourav"上的属性，并希望UI将根据该属性自动更新。但这并不是React的工作方式。要显示更改，您需要更改组件state或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 = {
};

使用react.js JSX页面

1 个答案: