关于react.js:React报错之react-component-changing-uncontrolled-input

注释从这开始~

总览

当 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 表单不可变，你将无奈在其中输出。