useRef通过单击按钮重置文本输入

问题描述

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

它保持不变，如果可能，请修改codesandbox链接here中的代码，非常感谢

解决方法

您在步骤中操作有误：将输入分配给输入字段以访问DOM 。应该是input element的引用，而不是text field component（实际上是div）的引用。

您应该具有文本字段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>
  );
}

,

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