如果我们给input输入框设置了受控组件,那么在input框是无法直接输入数据的,代码如下:
class TextEdit extends Component { state = { control:'' } render () { return ( <div> <textarea value={this.state.control} name="" id="" cols="30" rows="10"></textarea> <br /> <button>提交</button> <button>清空</button> </div> ) } }
此时的input框的值受state内部的control控制,如果想要变成可输入状态,或者是动态更改input框的值,那么需要给输入框加上onChange事件,动态的更改state内的值,代码如下:
class TextEdit extends Component { state = { control:'' } titleChange = (e) =>{ this.setState({ control:e.target.value }) } render () { return ( <div> <textarea value={this.state.control} name="" id="" cols="30" rows="10" onChange={this.titleChange}></textarea> <br /> <butto>提交</butto> <button>清空</button> </div> ) } }