如何在ReactJS中设置或清除物料界面输入值

我无法使用参照而不是状态清除材质ui输入的值

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

但这两者似乎都不适用于材料用户界面输入

以下类似问题没有帮助：

下面是我的React JSX的一个片段，用于输入和按钮：

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

我可以使用标准的HTML5输入使代码正常工作，但不能使用实质性的ui输入，这是本项目的要求。此外，该元素的值未处于react状态，我也没有寻找需要使用状态的解决方案-我需要将该部分作为不受控制的组件保留

关于材料用户界面，我遗漏了什么？我对他们的文档/api进行了梳理，但没有发现任何迹象表明它需要与标准输入进行不同的处理。谢谢

下面是CodeSandbox上的一个示例，显示了失败和成功，其中包括材料ui输入和HTML5输入：

---

我想出来了，你在裁判中使用了错误的道具。 您应该使用inputRef prop。 这是正确的版本

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

原因是材质输入组件创建具有以下结构的图元

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

因此，使用ref将引用根元素，它是。因此，他们创建了一个名为inputRef的单独道具来引用子元素

我更新了你的codesandbox.io代码并保存了它。在这里查看完整的工作代码

---

Metherial UI的版本是什么？我正在使用material UI/core 4.3.0。哇，我从来没有想到material UI会阻止React-ref按设计工作。如果文档中不厌其烦地指出必须使用inputRef来代替标准的React ref，那会很有帮助。谢谢您的见解。@Coder True，这有点不合常规。我碰巧通过看API找到了答案。原因是材质输入组件创建了一个具有该结构的元素，因此使用ref将引用根元素。因此，他们创建了一个名为inputRef的单独道具来引用子元素。我已经用这个解释更新了答案

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

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