react加减输入框_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属性：