注释从这开始~

总览

当input的值被初始化为undefined，但起初又变更为一个不同的值时，会产生"A component is changing an uncontrolled input to be controlled"正告。为了解决该问题，将input的值初始化为空字符串。比如说，value={message || ''} 。

这里有个例子来展现谬误是如何产生的。

import {useState} from 'react';const App = () => {  // ️ didn't provide an initial value for message  const [message, setMessage] = useState();  const handleChange = event => {    setMessage(event.target.value);  };  return (    <div>      <input        type="text"        id="message"        name="message"        onChange={handleChange}        value={message}      />    </div>  );};export default App;

下面代码的问题在于，message变量被初始化为undefined，因为咱们没有在useState钩子中为其传递初始值。

备用值

解决该谬误的一种形式是，如果input的值为undefined，那么就提供一个备用值。

import {useState} from 'react';const App = () => {  const [message, setMessage] = useState();  const handleChange = event => {    setMessage(event.target.value);  };  // ️  value={message || ''}  return (    <div>      <input        type="text"        id="message"        name="message"        onChange={handleChange}        value={message || ''}      />    </div>  );};export default App;

咱们应用逻辑与(||)操作符，如果操作符左侧的为假值(比如说undefined)，则返回其右侧的值。

如果message变量的值存储为undefined，咱们将空字符串作为备用值进行返回。

useState

另一种解决方案是，在useState钩子中为state变量传递初始值。

import {useState} from 'react';const App = () => {  // ️ pass an initial value to the useState hook  const [message, setMessage] = useState('');  const handleChange = event => {    setMessage(event.target.value);  };  return (    <div>      <input        type="text"        id="message"        name="message"        onChange={handleChange}        value={message}      />    </div>  );};export default App;

在useState钩子中传递初始值能够防止正告，因为此时message变量并没有从undefined变更为一个值。

引起正告的起因是，当message变量在没有值的状况下被初始化时，它会被设置为undefined。

传递一个像value={undefined}这样的属性，就等于基本没有传递value属性。

一旦用户在input中开始输出，value属性就会被传递到input表单，输出就会从不受控变为受控，这是不被容许的。

defaultValue

留神，如果你应用一个不受管制的input表单，你应该应用defaultValue属性而不是value。

import {useRef} from 'react';const App = () => {  const inputRef = useRef(null);  function handleClick() {    console.log(inputRef.current.value);  }  return (    <div>      <input        ref={inputRef}        type="text"        id="message"        name="message"        defaultValue="Initial value"      />      <button onClick={handleClick}>Log message</button>    </div>  );};export default App;

上述示例应用了不受管制的input。留神input表单上并没有设置onChange或者value属性。

你能够应用defaultValue属性来为不受管制的input传递初始值。然而，这一步骤不是必要的，如果你不想设置初始值，你能够省略该属性。

当应用不受管制的input表单时，咱们应用ref来拜访input元素。每当用户点击例子中的按钮时，不受管制的input 的值都会被记录下来。

你不应该为不受管制的input设置value属性，因为这将使input表单不可变，你将无奈在其中输出。