学习受控组件，完成这样一个案例：FBC易塔云建站-模板下载,web开发资源,技术博客逻辑：通过点击提交按钮，弹窗对话框，内容是input的输入实时值。FBC易塔云建站-模板下载,web开发资源,技术博客
实现：React的受控组件 方式
class ReadForm extends React.Component{
constructor (props) {
super(props);
this.state = {value: '初始值'};
this.InputChange = this.InputChange.bind(this);
this.ButtonClick = this.ButtonClick.bind(this);
}
InputChange(event){
this.setState(
{value : event.target.value},
() => {console.log(111)}
)
}
ButtonClick(event){
alert("当前值为：" + this.state.value);
event.preventDefault(); //阻止form默认提交行为
}
render () {
return(
<form action="">
<label>
姓名：<input type="text" value={this.state.value} onChange={this.InputChange}/>
</label>
<button type="submit" onClick={this.ButtonClick}>提交</button>
</form>
)
}
}
ReactDOM.render(<ReadForm/>, document.getElementById('root')); setState()有三种入参方式：
FBC易塔云建站-模板下载,web开发资源,技术博客 □：一个对象参数 setState({value:'123'});
FBC易塔云建站-模板下载,web开发资源,技术博客 □：一个函数 setState(()=>{//do something;});
FBC易塔云建站-模板下载,web开发资源,技术博客 □：两个参数，上面组合
this.setState(
{value : event.target.value},
() => {console.log(111)}
) 另一篇文章有记录，React里面的setState到底有几种用法？FBC易塔云建站-模板下载,web开发资源,技术博客
