受控和非受控表单

279次阅读

共计 3270 个字符，预计需要花费 9 分钟才能阅读完成。

导读	规范化的方式依然是借助 ref 来实现，只不过这个 ref 是由 React 的内置方法 createRef() 调用后生成的，在获取时，直接调用生成的 ref 就可以了。

受控和非受控表单

常用的受控表单示例

受控的下拉列表

import React, {Component} from 'react' 
 
export class Tables extends Component { 
 
  state = {subject: "HTML"} 
 
  render() { 
    return ( 
      &ltdiv&gt
        &ltp&gt{this.state.subject}&lt/p&gt
        &ltselect name=""id="" value={this.state.subject} 
          onChange={(ev) => this.setState({ subject: ev.target.value} 
            ) 
          }&gt 
          &ltoption value="JS"&gtJS&lt/option&gt 
          &ltoption value="HTML"&gtHTML&lt/option&gt 
          &ltoption value="CSS"&gtCSS&lt/option&gt
        &lt/select&gt
 
      &lt/div&gt
    ) 
  } 
} 
 
export default Tables

受控单选框

import React, {Component} from 'react' 
 
export class Tables extends Component { 
 
  state = {sex: "男"} 
 
  render() { 
    return ( 
      &ltdiv&gt 
        &ltp&gt{this.state.sex}&lt/p&gt
        &ltinput type="radio" name="sex" id=""value=" 男 " 
          onChange={(ev) => this.setState({sex: ev.target.value}) 
          } /&gt 男 
        &ltinput type="radio" name="sex" id=""value=" 女 " 
          onChange={(ev) => this.setState({sex: ev.target.value}) 
          } /&gt 女 
        &ltinput type="radio" name="sex" id=""value=" 妖 " 
          onChange={(ev) => this.setState({sex: ev.target.value}) 
          } /&gt 妖 
      &lt/div&gt 
    ) 
  } 
} 
 
export default Tables

受控复选框

import React, {Component} from 'react' 
 
export class Tables extends Component { 
 
  // 模拟数据源 
  Datas = [{id:1,title:'HTML',isChecked:false}, 
    {id:2,title:'JS',isChecked:true}, 
    {id:3,title:'CSS',isChecked:false}, 
  ] 
 
  checks = (index,ev)=>{// console.log(ev.target.checked) 
    // console.log(index) 
 
    this.Datas[index].isChecked = ev.target.checked 
  } 
 
  render() { 
    return ( 
      &ltdiv&gt
        &lth2&gt 复选框 &lt/h2&gt 
        {this.Datas.map((data,index)=>{ 
            return (&ltlabel key={data.id}&gt 
                {/* 使用 onChange 事件绑定，传递下标及事件对象，在处理函数中进行状态修改 */} 
                &ltinput type="checkbox" defaultChecked={data.isChecked} onChange={(ev)=/>{this.checks(index,ev)}} /&gt {data.title}  
              &lt/label&gt 
            ) 
          }) 
        } 
 
        &ltbutton onClick={()=>console.log(this.Datas)} &gt 展示多选框内容数据 &lt/button&gt
      &lt/div&gt
    ) 
  } 
} 
 
export default Tables

非受控表单

在大多数情况下，我们推荐使用受控表单来处理表单数据。

在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控表单，这时表单数据将交由 DOM 节点来处理。

受控表单需要为每个状态更新都编写数据处理函数，而使用非受控表单，你可以使用 ref 来从 DOM 节点中获取表单数据。

import React, {Component} from 'react' 
 
export class Tables extends Component {gets = ()=>{console.log(this.refs.users.value) 
  } 
 
  render() { 
    return ( 
      &ltdiv&gt 
        &ltinput type="text" ref='users'/&gt
        &ltbutton onClick={()=>this.gets()}&gt 获取 &lt/button&gt
      &lt/div&gt
    ) 
  } 
} 
 
export default Tables

但是，这样的用法会在浏览器中看到一个警告型的报错信息，原因也很简单，在新版的 React 中，默认启用了严格模式。

Warning: A string ref, "users", has been found within a strict mode tree.

我们需要在入口的 index.js 中，将严格模式的代码删除，如下：

ReactDOM.render( 
 &ltReact.StrictMode&gt
   &ltapp&gt&lt/app&gt 
 &lt/React.StrictMode&gt, 
 document.getElementById('root') 
);

改完之后就是这个鬼样子了，错误提示就消失了：

ReactDOM.render( 
    &ltapp&gt&lt/app&gt, 
  document.getElementById('root') 
);

规范化写法

但是，这样的方式并不好，别问为什么，就是不好，我们建议使用下面的方式：

import React, {Component} from 'react' 
 
export class Tables extends Component {constructor (){super() 
    this.myref = React.createRef()} 
 
  gets = ()=>{console.log(this.myref.current.value) 
  } 
 
  render() { 
    return ( 
      &ltdiv&gt 
        &ltinput type="text" ref={this.myref} /&gt 
        &ltbutton onClick={()=>this.gets()}&gt 获取 &lt/button&gt
      &lt/div&gt
    ) 
  } 
} 
 
export default Tables

规范化的方式依然是借助 ref 来实现，只不过这个 ref 是由 React 的内置方法 createRef() 调用后生成的，在获取时，直接调用生成的 ref 就可以了。

但是，需要注意，不论哪种方式，知道就行了，非受控表单，能不用就不要用，为啥啊? 不受控制的东西，你也敢往家里领?

又但是，正因为非受控表单将真实数据储存在 DOM 节点中，所以在使用非受控表单时，有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性，并且希望快速编写代码，使用非受控组件往往可以减少你的代码量。否则，你应该使用受控组件。

总结

在应用页面中，与用户交互的基本都是在表单中呈现的。根据 React 框架的设计理念，对于表单的渲染工作，肯定由框架负责的，而表单数据的交互必然需要收到框架的控制和依赖，受控表单才是我们最应该使用的表单方式，但是非受控表单明显代码更多，非受控表单是为了在特殊情况下获取 Dom 而存在的，官方也不建议使用，即便非受控表单看起来更好用。