React Material UI 重置值答案

【问题标题】：React material UI reset valuesReact Material UI 重置值
【发布时间】：2016-05-11 04:17:15
【问题描述】：

我正在使用带有 React 的 Material UI。

我似乎无法在提交时重置表单而不会在控制台中出现错误。

如果我有：<TextField defaultValue={myComment.title} refs="title" />

在提交时，如果我这样做：this.refs.title.setValue('') 我在控制台中收到以下错误

警告：不推荐使用 setValue() 方法。请改用 defaultValue 属性。或者将 TextField 用作具有 value 属性的受控组件。

所以我尝试这样做：this.refs.title.defaultValue = '' 但这没有用。

我在想我必须做一个 handleChange 事件吗？但是当我只想清除输入字段时，设置它似乎很痛苦。

提前感谢您的帮助。

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

因此，使用此组件可以帮助您轻松实现所需（即使它有点冗长）的最佳方法是将value 和onChange 属性传递给TextField... 您可以从当前组件处理状态上的value，甚至可以从父组件作为道具传递..

一个简单的例子：

handleInputChange(event) {
    this.setState({
        name: event.target.value
    })
}


cleanInput() {
    this.setState({
        name: ''
    })
}

<TextField value={this.state.name} onChange={this.handleInputChange.bind(this)} />

【讨论】：

我在想 React/Material UI 会让我的生活变得更简单...... ;) 哈。谢谢。
是的.. 它可能需要更多的输入，但在一天结束时它是值得的 :)
@AndréJunges cleanInput() 是什么？
@netpoetica 这只是我创建的用于重置名称的函数
这种模式会导致文本框出现延迟。有没有第二种选择？谢谢。

【解决方案2】：

您可以简单地使用getInputNode().value=""

所以在你的情况下它将是this.refs.title.getInputNode().value=""

【讨论】：

【解决方案3】：

试试这个来重置你的 TextField 和 Props 和 States：

reset = ()=> {
       var  m = "";
       document.getElementById('h1').value = m;
}

它只会重置你的 textField，如果你也想重置 State 或 Props，那么只需在其中添加 setState() 方法。

reset = ()=> {
           setState({
               firtName: '',
               lastName: ''
             })
 }

【讨论】：