Question

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

    <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

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

因此，要解决此问题，您可以在组件的状态中设置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' : ''}
/>

React-Toolbox <input />组件

1 个答案: