时间戳

首页 > 解决方案 > useRef 通过单击按钮重置 textInput

reactjs - useRef 通过单击按钮重置 textInput

问题描述

我正在为我的项目使用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链接中的代码，非常感谢

标签： reactjsinputmaterial-uifrontendreset

解决方案

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

您应该有valueTextfield 的状态或使用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>
  );
}

推荐阅读