使用 useState 或 useRef (React) 将值清除到输入中答案

【问题标题】：Clear value into input using useState or useRef (React)使用 useState 或 useRef (React) 将值清除到输入中
【发布时间】：2021-03-12 05:04:07
【问题描述】：

我得到了钩子：

const [myName, setMyName] = useState("");
const myNameRef = useRef();

然后我有表格：

<form onSubmit={(e) => addVist(e, user.id)}>
 <input type="text" name="myName" ref={myNameRef} onChange={e => setMyName(e.target.value)} />
 <input type="submit" value="Run" />
</form>

和方法：

const addVist = (e, userId) => {
        e.preventDefault();

        console.log(myName)
        //some code....

        //clear value form
        setMyName("");
        //setMyName('');
        //setMyName(e.target.value = "");
        //myNameRef.current.value("");

    }

但setMyName("") 不起作用 - 我仍然看到输入中的值。

【问题讨论】：

标签： reactjs react-native react-hooks use-state use-ref

【解决方案1】：

您忘记将 myName 添加为值。

<input type="text" name="myName" value={myName} ref={myNameRef} onChange={e => setMyName(e.target.value)} />

【讨论】：

【解决方案2】：

这是一个使用状态OR参考清除input的完整示例：

export default function App() {
  const [value, setValue] = useState("");
  const inputRef = useRef();
  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <input ref={inputRef} />
      <button
        onClick={() => {
          setValue("");
          inputRef.current.value = "";
        }}
      >
        Clear
      </button>
    </>
  );
}

请参阅Controlled VS Uncontrolled components。

【讨论】：

您实际上还问过如何使用 ref 进行重置
但如果我不需要它我不会使用它

【解决方案3】：

在您的文本输入中，您应该像这样将myName 传递给 value 属性

<input type="text" name="myName" value={myName} ref={myNameRef} onChange={e => setMyName(e.target.value)} />

【讨论】：

【解决方案4】：

您错过了将myName 绑定为input 标记的value 属性。

 <input type="text" name="myName" value={myName} ref={myNameRef} onChange={e => setMyName(e.target.value)} />

【讨论】：