reactjs - 使用 formsy-semantic-ui-react 的输入验证无法正常工作

Question

我正在使用 formsy-semantic-ui-react npm 包进行输入验证，但它无法正常工作，请参阅即使我已删除值也没有隐藏的红色警报错误标签。

                        <Form.Field required>
                        <Popup
                        trigger={<Label pointing='below'>  Name plate capacity [kWp]</Label>}
                        header='Name plate capacity'
                        content='The maximum DC power output for the selected region'
                        />
                        <Input required name="system_capacity" value={ params.system_capacity } onChange={ this.handleChange } className='abc'
            errorLabel={errorLabel}
            validations={{
                if(value.toString().match(/^(\d*\.)?\d+$/) !== null){
                  return true
                }else{
                  return false
                }
              }
            }}
            validationErrors={{
              customValidation: 'Name can only be numeric'
            }}
          />
                    </Form.Field>

Answer 1

您的代码中有无效的 JS，validation属性应该得到一个有效的 js 对象。

formsy-react有一个内置验证列表，其中之一是matchRegexp.

<Form.Field required>
  <Popup
    trigger={<Label pointing="below"> Name plate capacity [kWp]</Label>}
    header="Name plate capacity"
    content="The maximum DC power output for the selected region"
  />
  <Input
    required
    name="system_capacity"
    value={params.system_capacity}
    onChange={this.handleChange}
    className="abc"
    errorLabel={errorLabel}
    validations={{
      matchRegexp: /^(\d*\.)?\d+$/,
    }}
    validationErrors={{
      matchRegexp: 'Name can only be numeric',
    }}
  />
</Form.Field>;