material-ui - 如何使用 Material-ui@next TextField 错误 Prop

Question

我想使用 Material-UI Next 文本框 error Prop link ， Prop 类型为boolean . Material-UI props name 之前的版本是 errorText并且 Prop 类型是node link .

Textfield Material-UI 上一版使用 errorText Prop :

<TextField
  name='name'
  floatingLabelText='Name'
  hintText='Type your name'
  value={this.state.fields.name}
  onChange={this.onChange}
  errorText={this.state.error}
/>

与 errorText在 Material-UI 以前的版本中，该代码适用于显示错误状态。

Textfield Material-UI 接下来使用 error Prop :

<TextField
  name='name'
  label='Name'
  placeholder='Type your name'
  value={this.state.fields.name}
  onChange={this.onChange}
  error={true} //only accept true or false value
/>

关于 Material-UI 下一个 errorText Prop 改为 error bool 类型，只接受真或假值。如果我设置 error props 为 true，文本框随时显示错误状态。我只想在某些条件下显示错误状态。

我如何使用错误状态 this.state.error在 Material-UI Next 文本字段上？

Answer 1

使用 react 组件状态，可以存储 TextField值并将其用作错误指示符。 Material-UI 暴露了 error和 helperText props 以交互方式显示错误。

看看下面的例子:

<TextField
  value={this.state.text}
  onChange={event => this.setState({ text: event.target.value })}
  error={text === ""}
  helperText={text === "" ? 'Empty field!' : ' '}
/>