受控組件: 在當(dāng)前組件中的表單元素受到了react的控制
- 當(dāng)表單元素的內(nèi)容發(fā)生改變汁胆,react對應(yīng)的狀態(tài)也要發(fā)生改變
- 當(dāng)react對應(yīng)的狀態(tài)發(fā)生改變梭姓,表單元素的內(nèi)容也要發(fā)生改變。一旦給input設(shè)置了value屬性嫩码,value屬性對應(yīng)了組件中的一個(gè)狀態(tài)誉尖,受控組件表單元素的值受到了react的控制,我們發(fā)現(xiàn)铸题,表單沒辦法輸入铡恕,沒辦法改變了除了指定一個(gè)vlaue屬性琢感,還需要指定onChange事件,用來處理內(nèi)容的變化
class Form extends React.Component {
constructor(props) {
super(props)
this.state = {
username: ''
}
// this.handleChange = this.handleChange.bind(this)
}
render() {
return (
<form>
<label>
名稱:
<input type="text" value={this.state.username} onChange={this.handleChange} />
</label>
</form>
)
}
handleChange = (e) => {
this.setState({
username: e.target.value
})
}
}
ReactDOM.render(<Form />, document.getElementById('app'))