[英]Creating controlled input in react
我是一个新手,正在使用 FreeCodeCamp 学习 React。 在这个挑战中,它说:
当你在输入框中输入时,该文本由
handleChange()
方法处理,设置为本地state中的input
属性,并呈现为页面输入框中的值。 组件 state 是有关输入数据的单一事实来源。
我写了这个解决方案:
class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
// Change code below this line
this.handleChange = this.handleChange.bind(this);
// Change code above this line
}
// Change code below this line
handleChange(event) {
this.setState({
input: event.target.value
})
}
// Change code above this line
render() {
return (
<div>
{ /* Change code below this line */}
<input value={this.state.input} onChange={this.handleChange()} />
{ /* Change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};
控制台说:
“构建错误,打开浏览器控制台了解更多信息。”
我在哪里做错了? 我看不到我的错误..
该问题与您如何将事件处理程序分配给onChange
有关。
onChange
需要一个回调 function ,当输入值更改时将触发该回调。 在您的帖子中使用onChange={this.handleChange()}
,您实际上将undefined
分配给onChange
,因为handleChange
function 更新了组件 state 但它不返回任何内容。
将其更改为onChange={this.handleChange}
您的期望。 当输入改变时, this.handleChange
将被调用, event
object 将作为参数传入。
希望这会有所帮助。
您正在调用handleChange
而不是将其引用作为onChange
道具传递。
您可能不需要在 onChange 道具中运行您的 handleChange 方法。 所以你会得到这个:
onChange={this.handleChange}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.