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

如何在ReactJS中设置或清除物料界面输入值,reactjs,material-ui,Reactjs,Material Ui,我无法使用参照而不是状态清除材质ui输入的值 我已经尝试了我知道的两种类型的参考: ref={this.input} -及- ref={el=>this.input=el} 但这两者似乎都不适用于材料用户界面输入 以下类似问题没有帮助: 下面是我的React JSX的一个片段,用于输入和按钮: <Input type="text" id="name" inputComponent="input" ref={el => (thi

我无法使用参照而不是状态清除材质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>