03 React快速入门（三）——实现从一个输入框中添加完数据后此输入框内容清除的功能

功能描述：

      我们在一个输入框输入内容，然后点击添加按钮，此输入框的内容就会添加到页面上，但是此输入框中还存在上次输入的内容，我们想在每次输入添加完成之后，此输入框中的内容就会清除，如图：

实现思路：

      我们可以先在输入框上定义一个onChange事件，此事件通过一个e参数来获取到输入框中的内容，将它保存在一个变量中，然后每次点击按钮就会动态的在list数组中增加输入框中的内容。

       实现输入框内容清除功能的话，可以在list中增加完内容后将此变量值设置为空，然后将此变量和输入框的value属性做绑定即可，如图：

      定义一个变量存放输入框内容：

constructor(props){ //组件初始化函数，一调用组件就自动执行
super(props); //初始化一些参数，不必理会
this.state={ //定义state来存放数据
list:[


],
reactid:0, //此参数主要是解决key的报错问题而定义
inputValue:''
}
}

      onChange事件保存输入框内容：

handleInputValue(e){
this.setState({
inputValue:e.target.value
})
}

      点击按钮增加页面内容，同时变量值为空：

handleBtnClick(){
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
});
}

      绑定value属性：

<input value={this.state.inputValue} onChange={this.handleInputValue.bind(this)}/>

查看更多关于【react】的文章