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
表单不可变,你将无法在其中输入。
相关文章
- 学无止境,坚持无价!
- 首款通过! 机器学习服务活体检测算法荣获CFCA权威安全认证
- Web应用怎样获取Access Token?
- HMS Core 3D流体仿真技术,打造移动端PC级流体动效
- 如何优化大场景实时渲染?HMS Core 3D Engine这么做
- 【FAQ】申请Health Kit权限的常见问题及解答
- 数据价值深度挖掘,分析服务上线“探索”能力
- 【FAQ】在华为鸿蒙车机上集成华为帐号的常见问题总结
- 如何用3D流体实现逼真水流效果?
- 如何用3D流体实现逼真水流效果?
- 汽车行业:充分借力数据价值,推动数字化营销链路闭环
- 空间音频技术与生态发展高峰论坛成功举办,业界首个Audio Vivid创作工具花瓣三维声亮相
- 【运营宝典】华为分析服务如何助力广告投放策略优化?
- HMS Core 6.8.0版本发布公告
- 潦草手写体也能轻松识别,快速提取文字不用愁
- 上新啦KIT
- 开发者问第五期
- HDC2022的无障碍参会体验,手语服务是如何做到的?
- AR手势识别交互,让应用更加“得心应手”
- AI赋能音乐创作,人人都是音视频创作者