是否可以选择在 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>