## 受控組件? 在隨后的用戶輸入中，能夠控制表單中輸入元素的組件被稱為受控組件，即每個狀態更改都有一個相關聯的處理程序。 例如，我們使用下面的 handleChange 函數將輸入框的值轉換成大寫： ~~~js handleChange(event) { this.setState({value: event.target.value.toUpperCase() }) ~~~ ## 非受控組件? 非受控組件是在內部存儲其自身狀態的組件，當需要時，可以使用 ref 查詢 DOM 并查找其當前值。這有點像傳統的 HTML。 在下面的 UserProfile 組件中，我們通過 ref 引用`name`輸入框： ~~~js class UserProfile extends React.Component { constructor(props) { super(props) this.handleSubmit = this.handleSubmit.bind(this) this.input = React.createRef() } handleSubmit(event) { alert('A name was submitted: ' + this.input.current.value) event.preventDefault() } render() { return ( <form onSubmit={this.handleSubmit}> <label> {'Name:'} <input type="text" ref={this.input} /> </label> <input type="submit" value="Submit" /> </form> ); } } ~~~ 在大多數情況下，建議使用受控組件來實現表單。 ## 參考 [react面試題](https://github.com/semlinker/reactjs-interview-questions)