使用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>;