是否可以選擇在 React 中的受控組件中使用值作為輸入

Question

我正在學習 React 並想學習如何正確使用表單。 然后我發現有一種叫做 Controlled forms 的東西，所以我寫了這段代碼：

<input
  name='name'
  value={this.state.name}
  onChange={e => this.handleChange(e)}
/>

是否可以選擇使用“value”屬性，因為我們已經將輸入數據添加到狀態onChange ？ 是否真的需要值只是為了確保將輸入數據正確添加到狀態中？ 就為了自信？

Answer 1

受控組件可以通過 state 或 props 設置，因為你給了它一個 value 屬性。 如果您沒有為受控組件提供 onChange ，那么您將無法更改它的值，因為value屬性來自 state 或 props。

不受控制的組件沒有value屬性，因此它管理自己的值，當用戶在文本框中鍵入內容時，它將顯示該文本。 您可以將 onChange 添加到不受控制的組件，但不能重置它（因為它沒有 value 屬性）。

 const App = () => { const [controlled, setControlled] = React.useState(''); const onChange = React.useCallback( e => setControlled(e.target.value), [] ); return ( <div> <div> <label> contolled (can also set value with uncontrolled) <input type="text" value={controlled} onChange={onChange} /> </label> </div> <div> <label> contolled but no onChange, just follows other inputs <input type="text" value={controlled} /> </label> </div> <div> <label> uncontrolled (can never set it's value) <input type="text" onChange={onChange} /> </label> </div> </div> ); }; ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>