React实现表单数据的添加与删除

雨点打透心脏的1/2处 2022-07-17 16:23 385阅读 0赞

本文原创地址链接：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/52401661][http_blog.csdn.net_zhou_xiao_cheng_article_details_52401661]，未经博主允许不得转载。

最近在学习React,做了一个简单的Demo，写成博客，用以自勉。Demo功能：在输入框中输入数据后，点击保存按钮，数据将会逐一显示在输入框下方，点击保存后显示的任何一条数据，该数据即可被删除。

## **实现思路** ##

在开始实现之前，我们需要理清我们的思路，这样才能更好地去完成预定功能。

1.  点击保存按钮时，输入框中的数据读取，可通过`onChange`绑定事件，获得输入框数据：`e.target.value`
2.  自定义一个事件，输入数据后，点击保存按钮时，数据的存储操作交由该事件完成
3.  当不断点击保存按钮时，数据应该是多个的，可选用数组来存储数据
4.  数组中，数组的索引是唯一表示一个数据的方式，数据的操作可通过索引进行

## **实现过程** ##

class ReactDemo extends React.Component{ 
      render(){
        return(
          <div>
            <input />
            <button>点击保存</button>
          </div>
        )
      }
    }
    ReactDOM.render(<ReactDemo />,document.getElementById('app'))

这是本次Demo的雏形，接下来我们将会在这上面一点一点地做修改，进行功能的完善。  
此时，表单为非受控组件，也就是普通的组件，在输入框中输入任何数据，在输入框内均会显示。  
React组件提供了`this.state`以及`this.setState`，利用它们，我们可以十分方便地管理、更新组件的状态。

constructor() { super() this.state = { val: '', arr: [] } }

`this.state`通常在构造函数内部进行初始化，其值为对象，本例中，val用于保存输入框中的值，初始值为空字符串；arr是个数据，用于存储多个数据。

handleData(e) {
        this.setState({
          val: e.target.value
        })
      }

这里，`this.setState`会将val的值更新为`e.target.value`,当组件状态值（这里为val）发生改变，组件就会自动调用`render()`重新渲染UI 。

onButtonClick(e) {
          var val = this.state.val
          this.setState({
            arr: [val, ...this.state.arr]
          })
        }

展开运算符(…)是ES6的语法，它允许一个表达式在某处展开，利用这一特性，可将数组元素逐一展开：`...this.state.arr`,让val总是成作为数组的第一个元素，组成新数组`[val, ...this.state.arr]`后，赋给arr。

onDelete(index, e) {
        this.setState({
          arr: this.state.arr.filter((elem, i) => index !== i) }) }

通过数组的索引对数据进行删除操作，`[].filter()`接受一个方法作为它的参数，并返回匹配条件（index ！== i）的元素组成的新数组。

{arr1.map((i,index) =>( <div onClick={ this.onDelete.bind(this,index)}>{i}</div> ))}

这种JSX的语法是由facebook官方提出的一种十分简明的写法，个人觉得好用到爆。`[].map()`对数组元素依次进行函数的调用，并返回函数调用结果组成的新数组。`bind(this,index)`的第二个参数index为原函数`onDelete(index,e)`省略掉的第一个参数。  
好了，大功告成，让我们一起来看下效果吧…

height="400" width="100%" src="//codepen.io/zhouxiaocheng/embed/ORLEBA/?height=400&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true" scrolling="no">&\#10;

参考资料：  
[https://facebook.github.io/react/docs/forms.html][https_facebook.github.io_react_docs_forms.html]  
[http://javascript.ruanyifeng.com/stdlib/array.html\#toc14][http_javascript.ruanyifeng.com_stdlib_array.html_toc14]

[http_blog.csdn.net_zhou_xiao_cheng_article_details_52401661]: http://blog.csdn.net/zhou_xiao_cheng/article/details/52401661
[https_facebook.github.io_react_docs_forms.html]: https://facebook.github.io/react/docs/forms.html
[http_javascript.ruanyifeng.com_stdlib_array.html_toc14]: http://javascript.ruanyifeng.com/stdlib/array.html#toc14