如何使用 Material-ui@next TextField 错误道具答案

【问题标题】：How to use Material-ui@next TextField error props如何使用 Material-ui@next TextField 错误道具
【发布时间】：2018-08-31 11:39:07
【问题描述】：

我想用 Material-UI 下一个文本框error props link，props 类型是boolean。之前版本的 Material-UI 道具名称为errorText，道具类型为nodelink。

Textfield Material-UI 之前版本使用errorText props ：

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

在 Material-UI 之前的版本中使用 errorText，代码可以很好地显示错误状态。

Textfield Material-UI 接下来使用error props：

<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 道具更改为 error，布尔类型，只接受真或假值。如果我将error 属性设置为 true，则文本字段会随时显示错误状态。我只想在某些条件下显示错误状态。

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

【问题讨论】：

为什么不把错误情况保持在组件状态？
@galah92 你的意思是error={this.state.error}?
没错。我正在使用value={this.state.value} 和error={this.state.value === ""} 的变体。
@galah92 与 value={this.state.value} 和 error={this.state.value === ""} 它没有显示错误消息，我尝试使用 error={this.state.error} 但没有任何反应。如果发生错误，我想用红色文本颜色显示错误消息。与之前版本的 material-ui 中的 errorText 属性一样。

标签： material-ui

【解决方案1】：

我有条件地向 React 组件添加属性。

let inputProps = {};

并添加 inputProps 文本字段 ...

<TextField
    {...inputProps}
    margin="normal"
    name="firstName"
    label="First Name"
    value={row.name || ''}
    onChange={onChange}
/>

有条件

if(condition)
   inputProps.error: true;
   inputProps.helperText='Empty field!';

另见https://stackoverflow.com/a/31164357/11528102

【讨论】：

【解决方案2】：

我添加了一个在值为空时不显示错误并验证正则表达式（MAC 地址）的示例。

<TextField id="macAddress" label="MAC Address" name="macAddress"
  value={this.state.macAddress}
  onChange={this.handleChange}
  error={this.state.macAddress !== "" && !this.state.macAddress.match("^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$")}
  helperText={this.state.macAddress !== "" && !this.state.macAddress.match("^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$") ? 'MAC Address must be a 6-bytes string.' : ' '}
/>

【讨论】：

【解决方案3】：

使用反应组件状态，可以存储TextField 值并将其用作错误指示器。 Material-UI 公开了 error 和 helperText 属性以交互方式显示错误。

看看下面的例子：

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

【讨论】：

使用 MUI 3，helperText 需要一个 React 节点