XXX中国妞毛茸茸,星空无限传媒免费观看电视剧沈芯语,99久久国产露脸国语对白

原文地址：React.js Forms: Controlled Components
原文作者：Loren Stewart
譯者：小 B0Y
校對者：珂珂君

本文涵蓋以下受控組件：

文本輸入框
數字輸入框
單選框
復選框
文本域
下拉選擇框

同時也包含:

表單數據的清除和重置
表單數據的提交
表單校驗

點擊這里直接查看示例代碼。
查看示例。
請在運行示例時打開瀏覽器的控制臺。

介紹

在學習 React.js 時我遇到了一個問題，那就是很難找到受控組件的真實示例。受控文本輸入框的例子倒是很豐富，但復選框、單選框、下拉選擇框的例子卻不盡人意。

本文列舉了真實的受控表單組件示例，要是我在學習 React 的時候早點發現這些示例就好了。除了日期和時間輸入框需要另開篇幅詳細討論，文中列舉了所有的表單元素。

有時候，為了減少開發時間，有時候人們很容易為了一些東西（譬如表單元素）引入一個庫。而對于表單，我發現當需要添加自定義行為或表單校驗時，使用庫會讓事情變得更復雜。不過一旦掌握合適的 React 模式，你會發現構建表單組件并非難事，并且有些東西完全可以自己動手，豐衣足食。請把本文的示例代碼當作你創建表單組件的起點或靈感之源。

除了提供單獨的組件代碼，我還將這些組件放進表單中，方便你理解子組件如何更新父組件 state ，以及接下來父組件如何通過 props（單向數據流）更新子組件。

注意：本表單示例由很贊的 create-react-app 構建配置生成，如果你還沒有安裝該構建配置，我強烈推薦你安裝一下（npm install -g create-react-app）。目前這是搭建 React 應用最簡單的方式。

什么是受控組件?

受控組件有兩個特點:

受控組件提供方法，讓我們在每次 onChange 事件發生時控制它們的數據，而不是一次性地獲取表單數據（例如用戶點提交按鈕時）?！氨豢刂啤?的表單數據保存在 state 中（在本文示例中，是父組件或容器組件的 state）。
(譯注：這里作者的意思是通過受控組件，可以跟蹤用戶操作表單時的數據，從而更新容器組件的 state ，再單向渲染表單元素 UI。如果不使用受控組件，在用戶實時操作表單時，比如在輸入框輸入文本時，不會同步到容器組件的 state，雖然能同步輸入框本身的 value，但與容器組件的 state 無關，因此容器組件只能在某一時間，比如提表單時一次性地拿到（通過 refs 或者選擇器）表單數據，而難以跟蹤）
受控組件的展示數據是其父組件通過 props 傳遞下來的。

這個單向循環 —— （數據）從（1）子組件輸入到（2）父組件的 state，接著（3）通過 props 回到子組件，就是 React.js 應用架構中單向數據流的含義。

表單結構

我們的頂級組件叫做 App，這是它的代碼：

import React, { Component } from 'react';  
import '../node_modules/spectre.css/dist/spectre.min.css';  
import './styles.css';  
import FormContainer from './containers/FormContainer';

class App extends Component {  
  render() {
    return (
      <div className="container">
        <div className="columns">
          <div className="col-md-9 centered">
            <h3>React.js Controlled Form Components</h3>
            <FormContainer />
          </div>
        </div>
      </div>
    );
  }
}

export default App;

App 只負責渲染 index.html 頁面。整個 App 組件最有趣的部分是 13 行，FormContainer 組件。

插曲: 容器（智能）組件 VS 普通（木偶）組件

是時候提及一下容器（智能）組件和普通（木偶）組件了。容器組件包含業務邏輯，它會發起數據請求或進行其他業務操作。普通組件則從它的父（容器）組件接收數據。木偶組件有可能觸發更新 state （譯注：容器組件的 state）這類邏輯行為，但它僅通過從父（容器）組件傳入的方法來達到該目的。

注意： 雖然在我們的表單應用里父組件就是容器組件，但我要強調，并非所有的父組件都是容器組件。木偶組件嵌套木偶組件也是可以的。

回到應用結構

FormContainer 組件包含了表單元素組件，它在生命周期鉤子方法 componentDidMount 里請求數據，此外還包含更新表單應用 state 的邏輯行為。在下面的預覽代碼里，我移除了表單元素的 props 和 change 事件處理方法，這樣看起來更簡潔清晰（拉到文章底部，可以看到完整代碼）。

import React, {Component} from 'react';  
import CheckboxOrRadioGroup from '../components/CheckboxOrRadioGroup';  
import SingleInput from '../components/SingleInput';  
import TextArea from '../components/TextArea';  
import Select from '../components/Select';

class FormContainer extends Component {  
  constructor(props) {
    super(props);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleClearForm = this.handleClearForm.bind(this);
  }
  componentDidMount() {
    fetch('./fake_db.json')
      .then(res => res.json())
      .then(data => {
        this.setState({
          ownerName: data.ownerName,
          petSelections: data.petSelections,
          selectedPets: data.selectedPets,
          ageOptions: data.ageOptions,
          ownerAgeRangeSelection: data.ownerAgeRangeSelection,
          siblingOptions: data.siblingOptions,
          siblingSelection: data.siblingSelection,
          currentPetCount: data.currentPetCount,
          description: data.description
        });
    });
  }
  handleFormSubmit() {
    // 提交邏輯寫在這
  }
  handleClearForm() {
    // 清除表單邏輯寫在這
  }
  render() {
    return (
      <form className="container" onSubmit={this.handleFormSubmit}>
        <h5>Pet Adoption Form</h5>
        <SingleInput /> {/* Full name text input */}
        <Select /> {/* Owner age range select */}
        <CheckboxOrRadioGroup /> {/* Pet type checkboxes */}
        <CheckboxOrRadioGroup /> {/* Will you adopt siblings? radios */}
        <SingleInput /> {/* Number of current pets number input */}
        <TextArea /> {/* Descriptions of current pets textarea */}
        <input
          type="submit"
          className="btn btn-primary float-right"
          value="Submit"/>
        <button
          className="btn btn-link float-left"
          onClick={this.handleClearForm}>Clear form</button>
      </form>
  );
}

我們勾勒出了應用基礎結構，接下來我們一起瀏覽下每個子組件的細節。

`<SingleInput />` 組件

該組件可以是 text 或 number 輸入框，這取決于傳入的 props。通過 React 的 PropTypes，我們可以非常好地記錄組件拿到的 props。如果漏傳 props 或傳入錯誤的數據類型, 瀏覽器的控制臺中會出現警告信息。

下面列舉 <SingleInput /> 組件的 PropTypes：

SingleInput.propTypes = {  
  inputType: React.PropTypes.oneOf(['text', 'number']).isRequired,
  title: React.PropTypes.string.isRequired,
  name: React.PropTypes.string.isRequired,
  controlFunc: React.PropTypes.func.isRequired,
  content: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number,
  ]).isRequired,
  placeholder: React.PropTypes.string,
};

PropTypes 聲明了 prop 的類型（string、 number、 array、 object 等等），其中包括了必需（isRequired）和非必需的 prop，當然它還有更多的用途（欲知更多細節，請查看 React 文檔）。

下面我們逐個討論這些 PropType：

inputType：接收兩個字符串：'text' 或 'number'。該設置指定渲染 <input type="text" /> 組件或 <input type="number" /> 組件。
title：接收一個字符串，我們將它渲染到輸入框的 label 元素中。
name：輸入框的 name 屬性。
controlFunc：它是從父組件或容器組件傳下來的方法。因為該方法掛載在 React 的 onChange 處理方法上，所以每當輸入框的輸入值改變時，該方法都會被執行，從而更新父組件或容器組件的 state。
content：輸入框內容。受控輸入框只會顯示通過 props 傳入的數據。
placeholder：輸入框的占位符文本，是一個字符串。

既然該組件不需要任何邏輯行為和內部 state，那我們可以將它寫成純函數組件（pure functional component）。我們將純函數組件賦值給一個 const 常量上。下面是 <SingleInput /> 組件的所有代碼。本文列舉的所有表單元素組件都是純函數組件。

import React from 'react';

const SingleInput = (props) => (  
  <div className="form-group">
    <label className="form-label">{props.title}</label>
    <input
      className="form-input"
      name={props.name}
      type={props.inputType}
      value={props.content}
      onChange={props.controlFunc}
      placeholder={props.placeholder} />
  </div>
);

SingleInput.propTypes = {  
  inputType: React.PropTypes.oneOf(['text', 'number']).isRequired,
  title: React.PropTypes.string.isRequired,
  name: React.PropTypes.string.isRequired,
  controlFunc: React.PropTypes.func.isRequired,
  content: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number,
  ]).isRequired,
  placeholder: React.PropTypes.string,
};

export default SingleInput;

接著，我們用 handleFullNameChange 方法（它被傳入到 controlFunc prop 屬性）來更新 <FormContainer /> 容器組件的 state。

// FormContainer.js

handleFullNameChange(e) {  
  this.setState({ ownerName: e.target.value });
}
// constructor 方法里別漏掉了這行:
// this.handleFullNameChange = this.handleFullNameChange.bind(this);

隨后我們將容器組件更新后的 state （譯注：這里指 state 上掛載的 ownerName 屬性）通過 content prop 傳回 <SingleInput /> 組件。

`<Select />` 組件

選擇組件（就是下拉選擇組件），接收以下 props：

Select.propTypes = {  
  name: React.PropTypes.string.isRequired,
  options: React.PropTypes.array.isRequired,
  selectedOption: React.PropTypes.string,
  controlFunc: React.PropTypes.func.isRequired,
  placeholder: React.PropTypes.string
};

name：填充表單元素上 name 屬性的字符串變量。
options：是一個數組（本例是字符串數組）。通過在組件的 render 方法中使用 props.options.map()，該數組中的每一項都會被渲染成一個選擇項。
selectedOption：用以顯示表單填充的默認選項，或用戶已選擇的選項（例如當用戶編輯之前已提交過的表單數據時，可以使用這個 prop）。
controlFunc：它是從父組件或容器組件傳下來的方法。因為該方法掛載在 React 的 onChange 處理方法上，所以每當改變選擇框組件的值時，該方法都會被執行，從而更新父組件或容器組件的 state。
placeholder：作為占位文本的字符串，用來填充第一個 <option> 標簽。本組件中，我們將第一個選項的值設置成空字符串（參看下面代碼的第 10 行）。

import React from 'react';

const Select = (props) => (  
  <div className="form-group">
    <select
      name={props.name}
      value={props.selectedOption}
      onChange={props.controlFunc}
      className="form-select">
      <option value="">{props.placeholder}</option>
      {props.options.map(opt => {
        return (
          <option
            key={opt}
            value={opt}>{opt}</option>
        );
      })}
    </select>
  </div>
);

Select.propTypes = {  
  name: React.PropTypes.string.isRequired,
  options: React.PropTypes.array.isRequired,
  selectedOption: React.PropTypes.string,
  controlFunc: React.PropTypes.func.isRequired,
  placeholder: React.PropTypes.string
};

export default Select;

請注意 option 標簽中的 key 屬性（第 14 行）。React 要求被重復操作渲染的每個元素必須擁有獨一無二的 key 值，我們這里的 .map() 方法就是所謂的重復操作。既然選擇項數組中的每個元素是獨有的，我們就把它們當成 key prop。該 key 值協助 React 追蹤 DOM 變化。雖然在循環操作或 mapping 時忘加 key 屬性不會中斷應用，但是瀏覽器的控制臺里會出現警告，并且渲染性能將受到影響。

以下是控制選擇框組件（記住，該組件存在于 <FormContainer /> 組件中）的處理方法（該方法從 <FormContainer /> 組件傳入到子組件的 controlFun prop 中）

// FormContainer.js

handleAgeRangeSelect(e) {  
  this.setState({ ownerAgeRangeSelection: e.target.value });
}
// constructor 方法里別漏掉了這行:
// this.handleAgeRangeSelect = this.handleAgeRangeSelect.bind(this);

`<CheckboxOrRadioGroup />` 組件

<CheckboxOrRadioGroup /> 與眾不同，它從 props 拿到傳入的數組（像此前 <Select /> 組件的選項數組一樣），通過遍歷數組來渲染一組表單元素的集合 —— 可以是復選框集合或單選框集合。

讓我們深入 PropTypes 來更好地理解 <CheckboxOrRadioGroup /> 組件。

CheckboxGroup.propTypes = {  
  title: React.PropTypes.string.isRequired,
  type: React.PropTypes.oneOf(['checkbox', 'radio']).isRequired,
  setName: React.PropTypes.string.isRequired,
  options: React.PropTypes.array.isRequired,
  selectedOptions: React.PropTypes.array,
  controlFunc: React.PropTypes.func.isRequired
};

title：一個字符串，用以填充單選或復選框集合的 label 標簽內容。
type：接收 'checkbox' 或 'radio' 兩種配置的一種，并用指定的配置渲染輸入框（譯注：這里指復選輸入框或單選輸入框）。
setName：一個字符串，用以填充每個單選或復選框的 name 屬性值。
options：一個由字符串元素組成的數組，數組元素用以渲染每個單選框或復選框的值和 label 的內容。例如，['dog', 'cat', 'pony'] 數組中的元素將會渲染三個單選框或復選框。
selectedOptions：一個由字符串元素組成的數組，用來表示預選項。在示例 4 中，如果 selectedOptions 數組包含 'dog' 和 'pony' 元素，那么相應的兩個選項會被渲染成選中狀態，而 'cat' 選項則被渲染成未選中狀態。當用戶提交表單時，該數組將會是用戶的選擇數據。
controlFunc：一個方法，用來處理從 selectedOptions 數組 prop 中添加或刪除字符串的操作。

這是本表單應用中最有趣的組件，讓我們來看一下：

import React from 'react';

const CheckboxOrRadioGroup = (props) => (  
  <div>
    <label className="form-label">{props.title}</label>
    <div className="checkbox-group">
      {props.options.map(opt => {
        return (
          <label key={opt} className="form-label capitalize">
            <input
              className="form-checkbox"
              name={props.setName}
              onChange={props.controlFunc}
              value={opt}
              checked={ props.selectedOptions.indexOf(opt) > -1 }
              type={props.type} /> {opt}
          </label>
        );
      })}
    </div>
  </div>
);

CheckboxOrRadioGroup.propTypes = {  
  title: React.PropTypes.string.isRequired,
  type: React.PropTypes.oneOf(['checkbox', 'radio']).isRequired,
  setName: React.PropTypes.string.isRequired,
  options: React.PropTypes.array.isRequired,
  selectedOptions: React.PropTypes.array,
  controlFunc: React.PropTypes.func.isRequired
};

export default CheckboxOrRadioGroup;

checked={ props.selectedOptions.indexOf(option) > -1 } 這一行代碼表示單選框或復選框是否被選中的邏輯。

屬性 checked 接收一個布爾值，用來表示 input 組件是否應該被渲染成選中狀態。我們在檢查到 input 的值是否是 props.selectedOptions 數組的元素之一時生成該布爾值。
myArray.indexOf(item) 方法返回 item 在數組中的索引值。如果 item 不在數組中，返回 -1，因此，我們寫了 > -1。

注意，0 是一個合法的索引值，所以我們需要 > -1 ，否則代碼會有 bug。如果沒有 > -1，selectedOptions 數組中的第一個 item —— 其索引為 0 —— 將永遠不會被渲染成選中狀態，因為 0 是一個類 false 的值（譯注：在 checked 屬性中，0 會被當成 false 處理）。

本組件的處理方法同樣比其他的有趣。

handlePetSelection(e) {

  const newSelection = e.target.value;
  let newSelectionArray;

  if(this.state.selectedPets.indexOf(newSelection) > -1) {
    newSelectionArray = this.state.selectedPets.filter(s => s !== newSelection)
  } else {
    newSelectionArray = [...this.state.selectedPets, newSelection];
  }

    this.setState({ selectedPets: newSelectionArray });
}

如同所有處理方法一樣，事件對象被傳入方法，這樣一來我們就能拿到事件對象的值（譯注：準確來說，應該是事件目標元素的值）。我們將該值賦給newSelection 常量。接著我們在函數頂部附近定義 newSelectionArray 變量。因為我們將在一個 if/else 代碼塊里對該變量進行賦值，所以用 let 而非 const 來定義它。我們在代碼塊外部進行定義，這樣一來被定義變量的作用域就是函數內部的最外沿，并且函數內的代碼塊都能訪問到外部定義的變量。

該方法需要處理兩種可能的情況。

如果 input 組件的值不在 selectedOptions 數組中，我們要將值添加進該數組。
如果 input 組件的值在 selectedOptions 數組中，我們要從數組中刪除該值。

添加（第 8 - 10 行）： 為了將新值添加進選項數組，我們通過解構舊數組（數組前的三點...表示解構）創建一個新數組，并且將新值添加到數組的尾部 newSelectionArray = [...this.state.selectedPets, newSelection];。

注意，我們創建了一個新數組，而不是通過類似 .push() 的方法來改變原數組。不改變已存在的對象和數組，而是創建新的對象和數組，這在 React 中是又一個最佳實踐。開發者這樣做可以更容易地跟蹤 state 的變化，而第三方 state 管理庫，如 Redux 則可以做高性能的淺比較，而不是阻塞性能的深比較。

刪除（第 6 - 8 行）：if 代碼塊借助此前用到的 .indexOf() 小技巧，檢查選項是否在數組中。如果選項已經在數組中，通過.filter()方法，該選項將被移除。該方法返回一個包含所有滿足 filter 條件的元素的新數組（記住要避免在 React 直接修改數組或對象！）。

newSelectionArray = this.state.selectedPets.filter(s => s !== newSelection)

在這種情況下，除了傳入到方法中的選項之外，其他選項都會被返回。

`<TextArea />` 組件

<TextArea /> 和我們已提到的那些組件非常相似，除了 resize 和 rows，目前你應該對它的 props 很熟悉了。

TextArea.propTypes = {  
  title: React.PropTypes.string.isRequired,
  rows: React.PropTypes.number.isRequired,
  name: React.PropTypes.string.isRequired,
  content: React.PropTypes.string.isRequired,
  resize: React.PropTypes.bool,
  placeholder: React.PropTypes.string,
  controlFunc: React.PropTypes.func.isRequired
};

title：接收一個字符串，用以渲染文本域的 label 標簽內容。
rows：接收一個整數，用來指定文本域的行數。
name：文本域的 name 屬性。
content：文本域的內容。受控組件只會顯示通過 props 傳入的數據。
resize：接受一個布爾值，用來指定文本域能否調整大小。
placeholder：充當文本域占位文本的字符串。
controlFunc：它是從父組件或容器組件傳下來的方法。因為該方法掛載在 React 的 onChange 處理方法上，所以每當改變選擇框組件的值時，該方法都會被執行，從而更新父組件或容器組件的 state。

<TextArea /> 組件的完整代碼：

import React from 'react';

const TextArea = (props) => (  
  <div className="form-group">
    <label className="form-label">{props.title}</label>
    <textarea
      className="form-input"
      style={props.resize ? null : {resize: 'none'}}
      name={props.name}
      rows={props.rows}
      value={props.content}
      onChange={props.controlFunc}
      placeholder={props.placeholder} />
  </div>
);

TextArea.propTypes = {  
  title: React.PropTypes.string.isRequired,
  rows: React.PropTypes.number.isRequired,
  name: React.PropTypes.string.isRequired,
  content: React.PropTypes.string.isRequired,
  resize: React.PropTypes.bool,
  placeholder: React.PropTypes.string,
  controlFunc: React.PropTypes.func.isRequired
};

export default TextArea;

<TextAreas /> 組件的控制方法和 <SingleInput /> 如出一轍。細節部分請參考 <SingleInput /> 組件。

表單操作

handleClearForm 和 handleFormSubmit 方法操作整個表單。

1. handleClearForm

既然我們在表單的各處都使用了單向數據流，那么清除表單數據對我們來說也是小菜一碟。<FormContainer /> 組件的 state 控制了每個表單元素的值。該容器的 state 通過 props 傳入子組件。只有當 <FormContainer /> 組件的 state 改變時，表單組件顯示的值才會改變。

清除表單子組件中顯示的數據很簡單，只要把容器的 state （譯注：這里是指 state 對象上掛載的各個變量）設置成空數組和空字符串就可以了（如果有數字輸入框的話則是將值設置成 0）。

handleClearForm(e) {  
  e.preventDefault();
  this.setState({
    ownerName: '',
    selectedPets: [],
    ownerAgeRangeSelection: '',
    siblingSelection: [],
    currentPetCount: 0,
    description: ''
  });
}

注意，e.preventDefault() 阻止了頁面重新加載，接著 setState() 方法用來清除表單數據。

2. handleFormSubmit

為了提交表單數據，我們從 state 中抽取需要提交的屬性值，創建了一個對象。接著使用 AJAX 庫或技術將這些數據發送給 API（本文不包含此類內容）。

handleFormSubmit(e) {  
  e.preventDefault();

  const formPayload = {
    ownerName: this.state.ownerName,
    selectedPets: this.state.selectedPets,
    ownerAgeRangeSelection: this.state.ownerAgeRangeSelection,
    siblingSelection: this.state.siblingSelection,
    currentPetCount: this.state.currentPetCount,
    description: this.state.description
  };

  console.log('Send this in a POST request:', formPayload);
  this.handleClearForm(e);
}

請注意我們在提交數據后執行 this.handleClearForm(e) 清除了表單。

表單校驗

受控表單組件非常適合自定義表單校驗。假設要從 <TextArea /> 組件中排除字母 "e"，可以這樣做：

handleDescriptionChange(e) {  
  const textArray = e.target.value.split('').filter(x => x !== 'e');

  console.log('string split into array of letters',textArray);

  const filteredText = textArray.join('');
  this.setState({ description: filteredText });
}

把 e.target.value 字符串分割成字母數組，就生成了上述的 textArray。這樣字母 “e” （或其他設法排除的字母）就被過濾掉了。再把剩余的字母組成的數組拼成字符串，最后用該新字符串去設置組件 state。還不錯吧？

以上代碼放在本文的倉庫中，但我將它們注釋掉了，你可以按自己的需求自由地調整。

`<FormContainer />` 組件

下面是我承諾給你們的 <FormContainer /> 組件完整代碼，

import React, {Component} from 'react';  
import CheckboxOrRadioGroup from '../components/CheckboxOrRadioGroup';  
import SingleInput from '../components/SingleInput';  
import TextArea from '../components/TextArea';  
import Select from '../components/Select';

class FormContainer extends Component {  
  constructor(props) {
    super(props);
    this.state = {
      ownerName: '',
      petSelections: [],
      selectedPets: [],
      ageOptions: [],
      ownerAgeRangeSelection: '',
      siblingOptions: [],
      siblingSelection: [],
      currentPetCount: 0,
      description: ''
    };
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleClearForm = this.handleClearForm.bind(this);
    this.handleFullNameChange = this.handleFullNameChange.bind(this);
    this.handleCurrentPetCountChange = this.handleCurrentPetCountChange.bind(this);
    this.handleAgeRangeSelect = this.handleAgeRangeSelect.bind(this);
    this.handlePetSelection = this.handlePetSelection.bind(this);
    this.handleSiblingsSelection = this.handleSiblingsSelection.bind(this);
    this.handleDescriptionChange = this.handleDescriptionChange.bind(this);
  }
  componentDidMount() {
    // 模擬請求用戶數據
    //（create-react-app 構建配置里包含了 fetch 的 polyfill）
    fetch('./fake_db.json')
      .then(res => res.json())
      .then(data => {
        this.setState({
          ownerName: data.ownerName,
          petSelections: data.petSelections,
          selectedPets: data.selectedPets,
          ageOptions: data.ageOptions,
          ownerAgeRangeSelection: data.ownerAgeRangeSelection,
          siblingOptions: data.siblingOptions,
          siblingSelection: data.siblingSelection,
          currentPetCount: data.currentPetCount,
          description: data.description
        });
      });
  }
  handleFullNameChange(e) {
    this.setState({ ownerName: e.target.value });
  }
  handleCurrentPetCountChange(e) {
    this.setState({ currentPetCount: e.target.value });
  }
  handleAgeRangeSelect(e) {
    this.setState({ ownerAgeRangeSelection: e.target.value });
  }
  handlePetSelection(e) {
    const newSelection = e.target.value;
    let newSelectionArray;
    if(this.state.selectedPets.indexOf(newSelection) > -1) {
      newSelectionArray = this.state.selectedPets.filter(s => s !== newSelection)
    } else {
      newSelectionArray = [...this.state.selectedPets, newSelection];
    }
    this.setState({ selectedPets: newSelectionArray });
  }
  handleSiblingsSelection(e) {
    this.setState({ siblingSelection: [e.target.value] });
  }
  handleDescriptionChange(e) {
    this.setState({ description: e.target.value });
  }
  handleClearForm(e) {
    e.preventDefault();
    this.setState({
      ownerName: '',
      selectedPets: [],
      ownerAgeRangeSelection: '',
      siblingSelection: [],
      currentPetCount: 0,
      description: ''
    });
  }
  handleFormSubmit(e) {
    e.preventDefault();

    const formPayload = {
      ownerName: this.state.ownerName,
      selectedPets: this.state.selectedPets,
      ownerAgeRangeSelection: this.state.ownerAgeRangeSelection,
      siblingSelection: this.state.siblingSelection,
      currentPetCount: this.state.currentPetCount,
      description: this.state.description
    };

    console.log('Send this in a POST request:', formPayload)
    this.handleClearForm(e);
  }
  render() {
    return (
      <form className="container" onSubmit={this.handleFormSubmit}>
        <h5>Pet Adoption Form</h5>
        <SingleInput
          inputType={'text'}
          title={'Full name'}
          name={'name'}
          controlFunc={this.handleFullNameChange}
          content={this.state.ownerName}
          placeholder={'Type first and last name here'} />
        <Select
          name={'ageRange'}
          placeholder={'Choose your age range'}
          controlFunc={this.handleAgeRangeSelect}
          options={this.state.ageOptions}
          selectedOption={this.state.ownerAgeRangeSelection} />
        <CheckboxOrRadioGroup
          title={'Which kinds of pets would you like to adopt?'}
          setName={'pets'}
          type={'checkbox'}
          controlFunc={this.handlePetSelection}
          options={this.state.petSelections}
          selectedOptions={this.state.selectedPets} />
        <CheckboxOrRadioGroup
          title={'Are you willing to adopt more than one pet if we have siblings for adoption?'}
          setName={'siblings'}
          controlFunc={this.handleSiblingsSelection}
          type={'radio'}
          options={this.state.siblingOptions}
          selectedOptions={this.state.siblingSelection} />
        <SingleInput
          inputType={'number'}
          title={'How many pets do you currently own?'}
          name={'currentPetCount'}
          controlFunc={this.handleCurrentPetCountChange}
          content={this.state.currentPetCount}
          placeholder={'Enter number of current pets'} />
        <TextArea
          title={'If you currently own pets, please write their names, breeds, and an outline of their personalities.'}
          rows={5}
          resize={false}
          content={this.state.description}
          name={'currentPetInfo'}
          controlFunc={this.handleDescriptionChange}
          placeholder={'Please be thorough in your descriptions'} />
        <input
          type="submit"
          className="btn btn-primary float-right"
          value="Submit"/>
        <button
          className="btn btn-link float-left"
          onClick={this.handleClearForm}>Clear form</button>
      </form>
    );
  }
}

export default FormContainer;

總結

我承認用 React 構建受控表單組件要做一些重復勞動(比如容器組件中的處理方法)，但就你對應用的掌控度和 state 變更的透明度來說，預先投入精力是超值的。你的代碼會變得可維護并且很高效。

如果想在我發布新文章時接到通知，你可以在博客的導航欄部分注冊我的郵件發送清單。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

翻譯 | 玩轉 React 表單 —— 受控組件詳解

翻譯 | 玩轉 React 表單 —— 受控組件詳解

介紹

什么是受控組件?

表單結構

插曲: 容器（智能）組件 VS 普通（木偶）組件

回到應用結構

`<SingleInput />` 組件

`<Select />` 組件

`<CheckboxOrRadioGroup />` 組件

`<TextArea />` 組件

表單操作

1. handleClearForm

2. handleFormSubmit

表單校驗

`<FormContainer />` 組件

總結

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

翻譯 | 玩轉 React 表單 —— 受控組件詳解

介紹

什么是受控組件?

表單結構

插曲: 容器（智能）組件 VS 普通（木偶）組件

回到應用結構

<SingleInput /> 組件

<Select /> 組件

<CheckboxOrRadioGroup /> 組件

<TextArea /> 組件

表單操作

1. handleClearForm

2. handleFormSubmit

表單校驗

<FormContainer /> 組件

總結

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

`<SingleInput />` 組件

`<Select />` 組件

`<CheckboxOrRadioGroup />` 組件

`<TextArea />` 組件

`<FormContainer />` 組件