9.事件
2020-05-20 本文已影响0人
__疯子__
教程1-14完整项目地址 https://github.com/x1141300029/react-Todos.git
实现效果,输入框可用输入,并且获取输入的值
1.给输入框设置默认值src/components/TodoInput/index.js
//构造函数
constructor(props) {
super(props);
this.state={//添加状态
inputValue:''
}
}
render() {
return (
<div>
<input value={this.state.inputValue} type="text"/> #update 修改
<button>{this.props.btnText}</button>
</div>
);
}
运行项目yarn start
问题:输入框内输入值没有反应
解释:不是没有反应,而是输入的值,没有进行保存,react特性:单向数据流,所以需要手动给this.state.inputValue
设置值(使用onChange事件进行监听)
2.给输入框添加修改事件 onChange
<input value={this.state.inputValue} type="text" onChange={this.handleInputChange}/>
handleInputChange=(e)=>{
this.setState({
inputValue:e.currentTarget.value,
})
}