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

Posted 2023-02-22

【中文标题】如何使用 Material-ui@next TextField 错误道具

【英文标题】：How to use Material-ui@next TextField error props

【发布时间】：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 属性一样。

【参考方案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://***.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 节点