Create a form using React
想用React实现一个简单的表单,其中主要的组件如下:
class App extends Component {
render() {
return (
<div className="App">
<input type="text" value="" name="username"/>
</div>
);
}
}
第一坑:运行时发现输入框中输入任何字符都没有反应。原因官方文档也作了说明,简单说就是需要我们自己实现一个onChange
的事件函数。(还有一个选择是仍让DOM来自己管理这些输入的值,参考官方文档)
因此,参考官方文档,且为了方便代码复用,写了如下一个Input
组件,然后在App
组件中使用这个组件来替换原来的input
。
class Input extends Component {
constructor() {
super();
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.props.value = event.target.value;
}
render() {
return (
<input {...this.props} onChange={this.handleChange}/>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<input type="text" value="" name="username"/>
</div>
);
}
}
第二个坑出现了,运行时发现出现了如下的错误:
Uncaught TypeError: Cannot assign to read only property 'value' of object '#<Object>'
原因在于React组件的属性是只读的,因此在handleChange
中不能再对value
属性赋值了。