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

Question

提交表單后如何從 TextField 中清除值？ 代碼中的所有組件都是功能組件，而不是 class 組件。 這是其中一個 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>
    )
  }
}