[[425903]]

本文轉(zhuǎn)載自微信公眾號(hào)「勾勾的前端世界」，作者西嶺。轉(zhuǎn)載本文請(qǐng)聯(lián)系勾勾的前端世界公眾號(hào)。

常用的受控表單示例

受控的下拉列表

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 

受控復(fù)選框

import React, { Component } from 'react' 
 
export class Tables extends Component { 
 
  // 模擬數(shù)據(jù)源 
  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>復(fù)選框</h2> 
        { 
          this.Datas.map((data,index)=>{ 
            return ( 
              <label key={data.id}> 
                {/* 使用 onChange 事件綁定，傳遞下標(biāo)及事件對(duì)象，在處理函數(shù)中進(jìn)行狀態(tài)修改 */} 
                <input type="checkbox" defaultChecked={data.isChecked} onChange={(ev)=>{this.checks(index,ev)}} /> {data.title}  
              </label> 
            ) 
          }) 
        } 
 
        <button onClick={()=>console.log(this.Datas)} >展示多選框內(nèi)容數(shù)據(jù)</button> 
      </div> 
    ) 
  } 
} 
 
export default Tables 

非受控表單

在大多數(shù)情況下，我們推薦使用 受控表單 來處理表單數(shù)據(jù)。

在一個(gè)受控組件中，表單數(shù)據(jù)是由 React 組件來管理的。另一種替代方案是使用非受控表單，這時(shí)表單數(shù)據(jù)將交由 DOM 節(jié)點(diǎn)來處理。

受控表單需要為每個(gè)狀態(tài)更新都編寫數(shù)據(jù)處理函數(shù)，而使用非受控表單，你可以使用 ref 來從 DOM 節(jié)點(diǎn)中獲取表單數(shù)據(jù)。

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 

但是，這樣的用法會(huì)在瀏覽器中看到一個(gè)警告型的報(bào)錯(cuò)信息，原因也很簡單，在新版的 React 中，默認(rèn)啟用了嚴(yán)格模式。

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

我們需要在入口的 index.js 中，將嚴(yán)格模式的代碼刪除，如下：

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

改完之后就是這個(gè)鬼樣子了，錯(cuò)誤提示就消失了：

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

規(guī)范化寫法

但是，這樣的方式并不好，別問為什么，就是不好，我們建議使用下面的方式：

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 

規(guī)范化的方式依然是借助 ref 來實(shí)現(xiàn)，只不過這個(gè) ref 是由 React 的內(nèi)置方法 createRef() 調(diào)用后生成的，在獲取時(shí)，直接調(diào)用生成的 ref 就可以了。

但是，需要注意，不論哪種方式，知道就行了，非受控表單，能不用就不要用，為啥啊?不受控制的東西，你也敢往家里領(lǐng)?

又但是，正因?yàn)榉鞘芸乇韱螌⒄鎸?shí)數(shù)據(jù)儲(chǔ)存在 DOM 節(jié)點(diǎn)中，所以在使用非受控表單時(shí)，有時(shí)候反而更容易同時(shí)集成 React 和非 React 代碼。如果你不介意代碼美觀性，并且希望快速編寫代碼，使用非受控組件往往可以減少你的代碼量。否則，你應(yīng)該使用受控組件。

總結(jié)

在應(yīng)用頁面中，與用戶交互的基本都是在表單中呈現(xiàn)的。根據(jù) React 框架的設(shè)計(jì)理念，對(duì)于表單的渲染工作，肯定由框架負(fù)責(zé)的，而表單數(shù)據(jù)的交互必然需要收到框架的控制和依賴，受控表單才是我們最應(yīng)該使用的表單方式，但是非受控表單明顯代碼更多，非受控表單是為了在特殊情況下獲取 Dom 而存在的，官方也不建議使用，即便非受控表單看起來更好用。

至此，React 基本語法部分，算是告一段落，這一路走來，我淚眼婆娑，我披荊斬棘，我彷徨迷惘，我真不容易……

雖然不容易，但是，我那么好看，怎么可能這么結(jié)束了呢，不寫個(gè)案例也太不像話了!