带有形式语义用户界面反应的输入验证无法正常工作

Question

我正在使用formy-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有一个built-in validations的列表，其中一个是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>;