閱讀(2.7k) 書簽贊(1) 我要糾錯

React：表單

2018-06-19 11:08 更新

在前端開發(fā)中，當談到用戶輸入時，我們首先想到的是表單，諸如：<input>、<textarea>、<option>等。而在React中，這些表單組件與其他組件有所不同，那就是它們的狀態(tài)會隨著用戶交互而變化，所以要管理好這些組件的狀態(tài)，不是件易事。

在React中，表單組件有兩種類型：約束組件和非約束組件。

1、約束組件

設置了 value 的表單組件（<input> ）是一個約束組件。對于約束的表單組件（<input>），渲染出來的 HTML 元素始終保持 value 屬性的值，也可以這樣理解，當你使用約束組件時，不管你輸入什么，頁面上看到表單的值都是保持不變的。

var MyForm = React.createClass({
  getInitialState: function(){
     return {value:'Hello'};
  },
  render: function(){
    var value = this.state.value;
    return (<input type="text" value={value} />);
  }
});

上面的代碼中，將表單組件的狀態(tài)（value）交由React組件來控制，將狀態(tài)值存儲在React組件的state屬性中。

在約束組件中，既然用戶在渲染出來的元素里輸入任何值都不起作用，那么我們如何去響應更新用戶輸入的值呢？

我們要使用onChange事件：

var MyForm = React.createClass({
  getInitialState: function(){
     return {value:'Hello'};
  },
  handleChange: function(event){
    this.setState({value:event.target.value});
  },
  render: function(){
    var value = this.state.value;
    return (<input type="text" value={value} onChange={this.handleChange}/>);
  }
});

在上面的代碼中，我們調用onChange事件來監(jiān)聽狀態(tài)變化，同時使用 event.target.value 來取得表單的值。

所有的 HTML 原生組件都支持 onChange 屬性，而且可以用來監(jiān)聽冒泡的 change 事件，同時也提供了 event.target 來訪問觸發(fā)事件的DOM節(jié)點。

使用約束組件，我們可以控制數據流，在用戶輸入數據時更新state。

使用約束組件，我們可以為表單增加很多驗證限制！

2、非約束組件

沒有設置 value(或者設為 null) 的表單（例如：<input/>）組件是一個非約束組件，此表單組件的值不受React組件控制。

我們可以使用 defaultValue 屬性給表單（類型為radio、checkbox的<input>和<select>）組件設置一個非空的初始值。

var MyForm = React.createClass({
  render: function(){
     return (<input type="text" defaultValue="Hello" />);
  }
});

上面的代碼展示的就是一個非約束組件。組件的value并非由父組件設置，而是讓<input/>自己控制自己的值。

使用非約束組件時，我們可以使用 ref 屬性，以訪問DOM節(jié)點的值：

var MyForm = React.createClass({
  handleChange: function(){
    var value = this.refs.myinput.value;
    console.log(value);
  },
  render: function(){
     return (<input type="text" ref="myinput" onChange={this.handleChange} defaultValue="Hello" />);
  }
});

非約束組件可以用在基本的無須任何驗證或者輸入控制的表單中。

3、其他

3.1 Label

Label是表單元素中很重要的組件，通過Label可以明確的向用戶傳達你的要求，提示單選框和復選框的可用性。

在React中，由于for是JavaScript的關鍵字，所有應該用 htmlFor 替代 for 。

3.2 文本框和select

在HTML中，我們是這樣來設置<textarea/>的初始值：

<textarea>初始值</textarea>

但是，在React中，這樣的寫法是被禁止的，我們應該通過設置value或defaultValue。

//非約束
<textarea defaultValue="Hello" />

//約束
<textarea value={this.state.value}  onChange={this.handleChange} />

在React中，<select/>組件并不是采取在<option>中設置selected來設置已選項，而同樣是接受value和defaultValue來設置已選項。

//非約束
<select defaultValue="B">
  <option value="A">A</option>
  <option vlaue="B">B</option>
</select>

//約束
<select value={this.state.mySelect} onChange={this.handleChange}>   
  <option value="A">A</option>   
  <option vlaue="B">B</option>  
</select>

如果要設置多選select，可以這樣：

//非約束
<select multiple="true" defaultValue={["A","B"]}>
  <option value="A">A</option>
  <option vlaue="B">B</option>
</select>

//約束
<select multiple="true" value={this.state.mySelect} onChange={this.handleChange}>   
  <option value="A">A</option>   
  <option vlaue="B">B</option>  
</select>

注意：當使用可多選的select時，select組件的值在選項被選擇時不會更新，只有選項的selected屬性會發(fā)生變化。我們可以使用ref或者event.target來訪問選項，檢查它們是否被選中。

3.3 復選框和單選框

通常，復選框和單選框的值是不變的，只有checked狀態(tài)會變化，所以控制復選框或單選框，實質就是控制它們的checked屬性。

//非約束
<input type="radio" defaultChecked="true" />

//約束
<input type="radio" checked={this.state.checked} onChange={this.handleChange} />

在非約束組件中，我們可以使用defaultChecked設置復選框或單選框的初始值，值為布爾值。

3.4 Focus

在React中，我們使用 autoFocus 屬性來聚焦：

<input type="text" autoFocus="ture" />

當然，你也可以調用DOMNode的focus()方法來手動設置表單域聚焦。

總結

表單組件有兩種類型：約束組件（有value值）和非約束組件（無value值或value為null）。
所有的 HTML 原生組件都支持 onChange 屬性，而且可以用來監(jiān)聽冒泡的 change 事件，同時也提供了 event.target 來訪問觸發(fā)事件的DOM節(jié)點。
在React中，對于<textarea/>和<select/>組件，使用value和defaultValue來設置。

以上內容是否對您有幫助：

← React：DOM操作

寫筆記

我要補充