注释从这开始~
总览
当咱们把一个 input
的初始值设置为 null
或者笼罩初始值设置为 null
时,会产生 ”value
prop on input
should not be null” 正告。比如说,初始值来自于空的 API 响应。能够应用一个回退值来解决这个问题。
这里有个例子来展现谬误是如何产生的。
export default function App() {
// ⛔️ Warning: `value` prop on `input` should not be null.
// Consider using an empty string to clear the component or `undefined` for uncontrolled components.
return (
<div>
<input value={null} />
</div>
);
}
上述代码的问题在于,咱们为 input
表单的 value
属性设置为null
,这是不被容许的。
你也可能从近程 API 获取你的
input
表单的值,并将其设置为null
。
回退值
为了解决该问题,咱们能够通过提供回退值,来确保永远不会为 input
表单的 value
属性设置null
。
import {useState} from 'react';
const App = () => {
// 👇️ pass empty string as initial value
const [message, setMessage] = useState('');
const handleChange = event => {setMessage(event.target.value);
};
// ✅ use fallback, e.g.
// value={message || ''}
return (
<div>
<input
type="text"
id="message"
name="message"
onChange={handleChange}
value={message || ''}
/>
</div>
);
};
export default App;
咱们把
state
变量的值初始化为一个空字符串,而不是null
。
这样就能够解脱正告,除非在你代码的其余中央将 state
变量设置为null
。
咱们应用逻辑与 (||) 操作符,如果操作符左侧的为假值 (比如说null
),则返回其右侧的值。这能够帮忙咱们确保input
表单的 value
属性永远不会被设置为null
。
defaultValue
如果你借助 refs
应用不受管制的 input
表单,请不要在 input
元素上设置 value
属性,应用 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
表单不可变,你将无奈在其中输出。