乐趣区

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

退出移动版