我正在尝试构建一个 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 调用该函数,以及在将 this 绑定到它之后直接调用。但是,这两种方法都不起作用。
你能帮我解决这个问题吗?我完全被困在这里。