提交表单后清空 Material-UI 文本字段

Question

提交表单后如何清除 TextField 中的值？代码中的所有组件都是功能组件，而不是类组件。这是其中一个 TextFields，其他与此类似。我可以在下面的代码中设置 type='search' 但是用户需要按下一个按钮来清除该值，即使这样，错误检查也会抱怨该字段为空。 尝试刷新组件会更好吗？此表单位于我的应用程序的侧边栏中。

<form onSubmit={onSubmitHandler} className={classes.root}>
  <TextField
    name='firstName'
    inputRef={register({
      required: "Please enter first name",
      validate: value => isEmpty(value)
    })}
    label={translate('invitation.first_name')}
    error={!!errors.firstName}
    type='search'
    autoFocus
    fullWidth
  />

Answer 1

您必须将一个 value 属性传递给 TextField 组件。检查以下示例：

class SomeComponent extends Component {
  state = {value: ''}
  resetValue = () => {
    this.setState({value: ''});
  }
  render() {
    return (
      <div>
        <TextField
          ...
          value={this.state.value}
        />
        <button onClick={this.resetValue}>Reset</button>
      </div>
    )
  }
}