内容摘要：本文转载自微信公众号「勾勾的前端世界」，作者西岭。转载本文请联系勾勾的前端世界公众号。常用的受控表单示例受控的下拉列表importReact,{Component}fromreactexportcla

本文转载自微信公众号「勾勾的受控受控前端世界」，作者西岭。和非转载本文请联系勾勾的表单不受前端世界公众号。

常用的控制受控表单示例

受控的下拉列表

import React, {  Component } from react export class Tables extends Component {    state = {      subject: "HTML"   }   render() {      return (       <div>         <p>{ this.state.subject}</p>         <select name="" id="" value={ this.state.subject}           onChange={              (ev) => this.setState(               {  subject: ev.target.value }             )           }>           <option value="JS">JS</option>           <option value="HTML">HTML</option>           <option value="CSS">CSS</option>         </select>       </div>     )   } } export default Tables 

受控单选框

import React, {  Component } from react export class Tables extends Component {    state = {      sex: "男"   }   render() {      return (       <div>         <p>{ this.state.sex}</p>         <input type="radio" name="sex" id="" value="男"           onChange={              (ev) => this.setState({  sex: ev.target.value })           } /> 男         <input type="radio" name="sex" id="" value="女"           onChange={              (ev) => this.setState({  sex: ev.target.value })           } /> 女         <input type="radio" name="sex" id="" value="妖"           onChange={              (ev) => this.setState({  sex: ev.target.value })           } /> 妖       </div>     )   } } 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 (       <div>         <h2>复选框</h2>         {            this.Datas.map((data,index)=>{              return (               <label key={ data.id}>                 { /* 使用 onChange 事件绑定，传递下标及事件对象，西非在处理函数中进行状态修改 */}                 <input type="checkbox" defaultChecked={ data.isChecked} onChange={ (ev)=>{ this.checks(index,受控受控ev)}} /> { data.title}                </label>             )           })         }         <button onClick={ ()=>console.log(this.Datas)} >展示多选框内容数据</button>       </div>     )   } } 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 (       <div>         <input type="text" ref=users/>         <button onClick={ ()=>this.gets()}>获取</button>       </div>     )   } } export default Tables 

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

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

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

ReactDOM.render(  <React.StrictMode>    <App />  </React.StrictMode>,  document.getElementById(root) ); 

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

ReactDOM.render(     <App />,   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 (       <div>         <input type="text" ref={ this.myref} />         <button onClick={ ()=>this.gets()}>获取</button>       </div>     )   } } export default Tables 

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

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

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

总结

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

至此，React 基本语法部分，高防服务器算是告一段落，这一路走来，我泪眼婆娑，我披荆斩棘，我彷徨迷惘，我真不容易……

虽然不容易，但是，我那么好看，怎么可能这么结束了呢，不写个案例也太不像话了!