如何在 ReactJS 中设置或清除 material-ui Input 的值

Question

我无法使用 refs 而不是 state 清除 material-ui Input 的值。

我已经尝试了我所知道的两种类型的参考： ref={this.input} - 和 - ref={el => (this.input = el)}

但似乎都无法使用 material-ui 输入

以下类似问题没有帮助： How to get input value of TextField from Material UI? Clear and reset form input fields Clear an input field with Reactjs? how to set Input value in formField ReactJs

这是我的 React JSX 的输入和按钮的 sn-p：

    <Input
      type="text"
      id="name"
      inputComponent="input"
      ref={el => (this.name = el)}
    />
    <Button
      variant="contained"
      onClick={this.handleClear}
      className="materialBtn"
    >
      Clear
    </Button>

我期望的事件处理程序应该清除输入值：

    handleClear() {
      this.name.value = "";
    }

我可以使用标准的 HTML5 输入使代码正常工作，但 不能 使用 material-ui 输入，这是该项目的要求。此外，这个元素的值不是处于反应状态，我不是在寻找需要使用状态的解决方案——我需要将这块作为不受控制的组件。

关于material-ui，我缺少什么？我已经梳理了他们的文档/api，但没有发现任何表明它需要与标准输入不同的处理方式。谢谢

下面是 CodeSandbox 上的一个示例，显示了使用 material-ui 输入的失败和使用 HTML5 输入的成功： https://codesandbox.io/s/fancy-frost-joe03

Answer 1

import React, { useState } from 'react'
    
import { Button, Container, InputBase } from '@material-ui/core'


const ClearText = ()=> {
    const [text , setText] = useState("")
}

const clearTextField = () => setText("")

    return (
        <Container>
        <InputBase 
        value={text ? text : ""}
        onChange={(e)=>setText(e.target.value)}
        />


        <Button onClick={clearTextField} > Clear </Button>
        </Container>
    )
};

export default ClearText;

Answer 2

我想通了，你为 ref 使用了错误的道具。 您应该使用 inputRef 道具。 这是正确的版本，

<Input
    type="text"
    id="name"
    inputComponent="input"
    inputRef={el => this.name = el}           
/>
<Button
    variant="contained"
    onClick={this.handleClear}
    className="materialBtn"
>
 Clear
</Button>

handleClear() {
      this.name.value = "";
    }

原因是Material Input组件创建了一个结构如下的元素，

<div class="MuiInputBase-root MuiInput-root MuiInput-underline">
<input class="MuiInputBase-input MuiInput-input" id="name" type="text" value=""></input>
</div>

因此，使用ref 将引用根元素<div>。因此，他们创建了一个名为 inputRef 的单独属性来引用子元素 <input>。

我更新了您的 codesandbox.io 代码并保存了它。在此处查看完整的工作代码，

https://codesandbox.io/s/elastic-dhawan-l4dtf