在使用受控輸入組件時，如果我們將受控組件的值設定為 null 或 undefined，之前的值仍會顯示在 UI 上而不是更改它，并且保持該輸入值的狀態將更改為 null 或 undefined。我創建了一個沙箱以便更好地理解
https://codesandbox.io/s/black-architecture-0wqw1
謝謝
uj5u.com熱心網友回復：
如果資料型別是null或undefined反應自動抑制該值并且不記錄任何內容。
如果您想查看該特定值的型別，請寫入{typeof data}，然后您將得到答案。
...
setData(null)
typeof data // object
setData("hi")
typeof data // string
setData(undefined)
typeof data // undefined
...
uj5u.com熱心網友回復：
這是快速修復，它永遠不會改變值變數，如果資料然后將資料放在其他空字串中，它是如何作業的
<input
type="text"
onChange={(e) => setData(e.target.value)}
value={data ? data:""}
/>
我希望這能解決你的問題，這里是完整的修復， https://codesandbox.io/embed/optimistic-currying-snn8t?fontsize=14&hidenavigation=1&theme=dark
uj5u.com熱心網友回復：
您可以在輸入組件之外的任何地方使用 ref tout 更改輸入的值，請參見下文：
import React, { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
const [data, setData] = useState(null);
const inputRef = React.useRef(null);
useEffect(() => {
console.log(data);
}, [data]);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<input
ref={inputRef}
type="text"
onChange={(e) => setData(e.target.value)}
value={data}
/>
<div style={{ marginTop: "10px" }}>
<button onClick={() => {
setData(null);
inputRef.current.value = ''
}}>SET DATA NULL</button>
</div>
<div style={{ marginTop: "10px" }}>
<button onClick={() => {
setData(undefined)
inputRef.current.value = ''
}}>
SET DATA UNDEFINED
</button>
</div>
<div style={{ marginTop: "10px" }}>INPUT VALUE {data}</div>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/355093.html
上一篇：單擊子元素時停止觸發父事件