受控組件(Controlled Components)
這邊所提到的組件是指在form表單內的、、的這類元素，當我們使用React創建表單的時候，我們就不得不注意到受控組件這個概念，在 React 中，可改變的狀態幾乎都存在於state中，且僅使用setState()方法，就是單一來源，使 React 的 state 成為“唯一數據源”，呈現表單的 React 組件控制後續用戶輸入在該表單中發生的情況。以這種方式由 React 控制其值的輸入表單元素稱為“受控組件”。

這是一個表單提交的範例

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    event.preventDefault()
    this.setState({
      submit: this.state.input
    });
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            value={this.state.input}
            onChange={this.handleChange} />
          <button type='submit'>提交</button>
        </form>
        <h1>{this.state.submit}</h1>
      </div>
    );
  }
};

這個範例的功能主要是將提交的東西顯示出來，因此我創建了一個表單提交的按鈕，可以看到我們將this.state的其中一個屬性定義為submit代表是控制表單提交的按鈕

 this.state = {
      input: '',
      submit: ''
    };

當我們再提交表單時，不希望因為網頁刷新導致我們所提交的東西被刷掉，所以我們要利用event.preventDefault()提交處理程序，以防止刷新網頁的默認表單提交行為。其次，調用該setState()方法，傳入要更改的不同鍵值對的對象。在這種情況下，您要設置submit為變量的值input。

  this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    event.preventDefault()
    this.setState({
      submit: this.state.input
    });
  }

最後，創建一個標籤，以及定義按鈕，接著將輸入完枝和下enter就可以看到妳的輸入呈現在頁面上

   return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            value={this.state.input}
            onChange={this.handleChange} />
          <button type='submit'>提交</button>
        </form>
        <h1>{this.state.submit}</h1>
      </div>
    );
  }
};

參考文章
https://reactjs.org/docs/forms.html
https://hackmd.io/@chrisHsiao/rknVooSkP