联系表单onChange函数调用错误

Question

我正在使用react.js创建一个联系人表单，我得到了以下错误；'更改电子邮件字段时，ContactForm组件应使用更新的联系人数据调用onChanges。'有什么帮助吗？！

我在contact.jsx文件中得到这个错误。不确定如何解决此问题。

rextester链接：https://rextester.com/LWKDFE70058

我知道修复方法是添加"this.props.name.onChange(this.props.data("行，但不确定将其添加到哪里。如有任何帮助，我们将不胜感激？！

Answer 1

您需要将输入字段绑定到数据模型对象。此外，当输入字段值发生变化时，还需要将新值设置回对象模型。

例如，请查看以下示例代码：

class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);