useRef 通过单击按钮重置 textInput答案

【问题标题】：useRef reset textInput by Clicking buttonuseRef 通过单击按钮重置 textInput
【发布时间】：2021-01-21 23:35:13
【问题描述】：

我正在为我的项目使用 material-ui，并且我正在执行功能以在单击外部按钮时将输入文本重置为空，似乎没有成功

这是我的代码

var inputRef = useRef(null)

将 inputRef 分配给输入字段以访问 DOM

<TextField label="Student Name" ref={inputRef} />

点击后将文本字段重置为空的外部按钮：

  <Button variant="contained" color="primary" onClick={() => {inputRef.current.value = ""}}>
    Reset
  </Button>

并没有改变，如果可以的话，请修改codeandbox链接here中的代码，非常感谢

【问题讨论】：

标签： reactjs input material-ui frontend reset

【解决方案1】：

您在步骤中做错了：将 inputRef 分配给输入字段以访问 DOM。它应该是 input element 的引用而不是 text field component（实际上是一个 div）。

您应该拥有 Textfield 的 value 的状态，或者使用 inputRef 而不是 ref 来指向输入元素。 Demo

import React, { useRef } from "react";
import { TextField, Button } from "@material-ui/core";
import "./styles.css";

export default function App() {
  var inputRef = useRef(null);
  return (
    <div className="App">
      <TextField label="Student Name" inputRef={inputRef} />
      <Button
        onClick={() => {
          console.log(inputRef);
          inputRef.current.value = "";
        }}
        variant="contained"
        color="primary"
      >
        Reset
      </Button>
    </div>
  );
}

【讨论】：

【解决方案2】：

useRef 可用于 html DOM 元素（<input/>）。要将 ref 传递给 Material-UI 输入，您应该使用 inputRef 属性。

请参考How can I use ref in TextField

 var inputRef = useRef(null);

<TextField label="Student Name" inputRef={inputRef} />

demo

【讨论】：