如何使用Material-ui@nextTextField错误道具

Question

我想使用材料-UI Next文本字段错误道具链接，道具类型是布尔。前一个版本的材料UI道具名称是errorText，道具类型是节点链接。

以前的版本使用errorText道具：

<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材质界面下一步使用错误道具：

<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
/>

在材料-用户界面下一步错误文本道具更改为布尔类型的错误，并且只接受true或false值。如果我设置错误道具为true，文本字段将随时显示错误状态。我只想在特定条件下显示错误状态。

我怎么能使用错误状态<代码>this.state.error材料UI下一个文本字段？




Answer 1

我添加了一个示例，该示例在值为空时不显示错误，并验证正则表达式（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.' : ' '}
/>

Answer 2

使用react组件状态，可以存储TextField值，并将其用作错误指示器。材质UI公开错误和帮助文本道具，以交互方式显示错误。

请看以下示例：

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