上篇《React 数据流管理:组件之间数据是如何传递的?》,我们利用 Props 完成了对 React 数据流管理的所有内容的学习。而之前提到的关于 JSX 交互部分,用户的页面操作,都是由表单承接的,那么接下来的表单的处理就是重点了。
React 中表单的处理,实际是用户与应用之间的交互逻辑,而应用与用户之间的交互都是表单来承接的,所以我们实际学习的内容就是 JSX 与用户表单数据的交互。在 React 中,表单又分为了受控表单和非受控表单两中类别。
受控表单:表单元素的值全部出 React 来进行管理,此时表单元素中的值都放在 state 中,所以表单元素里的值需要从 state 中进行获取。
非受控表单:不受 React 管理控制,表单元素的数据由 DOM 元素本身进行管理,表单元素的值也是存放在 DOM 元素里的,获取的时候需要操作 DOM 元素。
React 的基本逻辑是数据决定 UI 的,所以 React 必然要控制数据,而非受控表单显然不符合这个基本逻辑,实际开发中也很少遇到,重点还是受控表单。
接下来,我们通过具体的代码来进行学习研究。
受控组件(表单)
我们使用普通的表单,在表单中展示 state 中的数据:
- importReact,{Component}from'react'
- exportclassTablesextendsComponent{
- state={
- name:"xiling"
- }
- render(){
- return(
-
-
"text" =value={this.state.name}/> -
- )
- }
- }
- exportdefaultTables
页面中呈现的表单及内容是完全没问题的,但是当我们在页面中尝试修改表单数据时,你会发现是无法修改的,而且还报错了。这和前面学习的 state 的修改条件是一致的,不能直接修改,需要通过 setState() 方法进行数据的修改,代码如下:
- changes=(ev)=>{
- this.setState({
- name:ev.target.value
- })
- }
- render(){
- return(
-
-
"text" =value={this.state.name}onChange={this.changes}/> -
- )
- }
- }
表单的修改是由用户输入操作的,也就是用户输入到表单是什么值,相对应的 state 就改成什么值。而这个操作,就需要获取到表单中用户的输入,同时我们也需要知道用户是何时触发修改动作的,所以,我们需要给表单绑定一个修改值这个动作的触发事件 onChange,在事件触发后,事件处理函数接收 事件对象(ev)从而获取用户的修改内容,然后再通过 setState() 修改数据。
这个逻辑并没有什么问题,但是,如果我们有两个表单,就需要对应的两个事件处理函数,如果有3个表单,4个表单,10个表单……
- importReact,{Component}from'react'
- exportclassTablesextendsComponent{
- state={
- name:"xiling",
- age:18
- }
- changes=(ev)=>{
- this.setState({
- name:ev.target.value
- })
- }
- ages=(ev)=>{
- this.setState({
- age:ev.target.value
- })
- }
- render(){
- return(
-
-
"text" =value={this.state.name}onChange={this.changes}/> -
"text" =value={this.state.age}onChange={this.ages}/> -
- )
- }
- }
- exportdefaultTables
这样的写法肯定不对,最直观的修改办法就是将单独的事件处理函数删除,直接把事件的函数处理写到事件绑定上,比如这样:
- render(){
- return(
-
-
"text" =value={this.state.name} - onChange={(ev)=>{
- this.setState({name:ev.target.value})
- }}
- />
-
"text" =value={this.state.age} - onChange={(ev)=>{
- this.setState({age:ev.target.value})
- }}
- />
-
- )
- }
但是,即便这样,依然存在需要为每个表单单独写修改逻辑的问题,表单一旦多了之后,也是一个非常棘手的问题。
能不能对表单的修改进行统一的管理呢?
当然可以!
我们利用表单属性就可以实现。做法也很简单,我们给每一个表单添加一个 name 属性,属性值与 state 中的属性值保持一致,这样在事件处理函数中就可以获取表单的属性值了。
因为与 state 是保持一致的,所以,我们就可以直接把表单属性当作要修改的 state 属性值使用了,代码如下:
- importReact,{Component}from'react'
- exportclassTablesextendsComponent{
- state={
- name:"xiling",
- age:18
- }
- tables=(ev)=>{
- constprop=ev.target.name
- this.setState({
- [prop]:ev.target.value
- })
- }
- render(){
- return(
-
-
"text" =name="name"value={this.state.name}onChange={this.tables}/> -
"text" =name="age"value={this.state.age}onChange={(ev)=>this.tables(ev)}/> -
- )
- }
- }
- exportdefaultTables
最后,我们再来解决报错问题,报错的原因在控制台中已经很明确了:受控表单需要对应的事件处理来控制数据的变化,如果没有那就会出现报错。
但是,如果我只想将数据在表单中展示,并不想进行控制修改的情况下,依然出现这样的错误,就非常不友好了,那应该怎么做呢?
有两种解决办法,都很简单,我们来看一下:
- render(){
- return(
-
- {/*第一种就是加一个readOnly属性,告诉React表单为只读的,不需要修改*/}
-
"text" =value={this.state.name}readOnlyonChange={(ev)=>{ - this.setState({name:ev.target.value})
- }}/>
- {/*需要注意,设置为只读后,即便添加修改事件,也不能修改*/}
- {/*第二种就是使用defaultValue赋值*/}
- {/*意思就是设置默认值*/}
-
"text" =defaultValue={this.state.age}/> -
- )
- }
下篇,我会展示常用的受控表单示例和非受控表单的原始及规范化写法。
再写个 React 语法入门案例,我就非常像话地结束这一系列,阿里嘎多!
原文链接:https://mp.weixin.qq.com/s/jjosCESZlj3owxRSQnmFQQ