React material UI 重置值

Question

我正在使用 material UI 和 React。

我似乎无法在不在控制台中出现错误的情况下在提交时重置表单。

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

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

Warning: setValue() method is deprecated. Use the defaultValue property instead. Or use the TextField as a controlled component with the value property.

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

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

在此先感谢您的帮助。

Answer 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)} />

Answer 2

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

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

Answer 3

试试这个来重置您的 TextField 和道具和状态：

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

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

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

Answer 4

我刚刚有这个问题，我看到你可以写：

type="reset"

https://jsfiddle.net/hfcrsqy2/

React material UI 重置值

React material UI reset values

javascript

reactjs

material-ui