reactjs - 反应工具箱零件

Question

在 React-Toolbox 中编写<Input />组件时，在定义错误 Prop 时，它默认显示在页面上。如何动态呈现错误或配置它。下面的代码...所以您总是会在输入字段下方看到错误消息“无效的电子邮件地址”。

    <Input
      type='email'
      label='Email address'
      icon='email'
      value={this.state.email}
      onChange={this.handleChange.bind(this, 'email')}
      hint='email@domain.com'
      error="Invalid Email Address"
    />

Answer 1

因为只要该属性不为空就会显示错误，因此您只需在用户输入出现实际错误时传递错误属性。

因此，要解决此问题，您可以emailError在组件的状态中拥有一个属性来确定这一点，因此，只要将此新属性设置为true您this.setState()将触发重新渲染，从而将Invalid Email错误字符串作为属性发送到 React-Toolbox输入组件。

<Input
  type='email'
  label='Email address'
  icon='email'
  value={this.state.email}
  onChange={this.handleChange.bind(this, 'email')}
  hint='email@domain.com'
  error={this.state.emailError ? 'Invalid Email Address' : ''}
/>