React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react component uncontrolled报错

react component changing uncontrolled input报错解决

作者:Borislav Hadzhiev

这篇文章主要为大家介绍了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表单不可变,你将无法在其中输入。

原文链接:bobbyhadz.com/blog/react-…

以上就是react component changing uncontrolled input报错解决的详细内容,更多关于react component uncontrolled报错的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文