我是reactjs的新手,正在尝试打印输入字段的更新值.我首先尝试的是:
var App = React.createClass({
render() {
return <div>
<h1>Hello, {this.props.name}</h1>
<input type="text" onKeyUp={this.handleChange} />
<p>{this.handleChange}</p>
</div>;
},
handleChange: function(event) {
return event.target.value;
}
});
App = React.createFactory(App);
React.render(
<App name="World" />,
document.getElementById('mount-point'));
但是我不明白为什么它不起作用.比我尝试过:CodePen也许有人可以帮助我立即打印< p>中输入字段的值.元件
解决方法:
var App = React.createClass({
getInitialState: function() {
return {
text: "",
};
},
handleChange: function(event) {
this.setState({ text: event.target.value });
},
render() {
return <div>
<h1>Hello, {this.props.name}</h1>
<input type="text" onChange={this.handleChange} />
<p>{this.state.text}</p>
</div>;
},
});
您必须将组件的所有状态存储在this.state中.使用this.setState更新状态.更新状态时,组件将自动以新状态重新呈现.
该段的内容是状态的当前值.通常使用onChange代替onKeyUp来处理文本输入中的状态更改.当文本输入更改时,handleChange将更新状态.