useRef 通过单击按钮重置 textInput

Question

我正在为我的项目使用 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>

并且它没有改变，如果可能，请在这里修改代码和框链接中的代码，非常感谢

Answer 1

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

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

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>
  );
}

Answer 2

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

请参考如何在 TextField 中使用 ref

 var inputRef = useRef(null);

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

演示