javascript - 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...您可以处理当前组件中状态的值，甚至可以从父级组件作为 props 传递..

一个简单的例子:

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


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

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