reactjs - 如何在 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 片段:

    <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 输入，这是该项目的要求。此外，这个元素的值不是处于 react 状态，我不是在寻找需要使用状态的解决方案——我需要将这部分作为不受控制的组件。

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

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

Answer 1

我想通了，你为 ref 使用了错误的 Prop 。您应该使用 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 的单独 Prop 引用子元素 <input> .

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

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