Question

我有一个带有react-materialize项目的React-Redux，我需要应用不同的验证点击按钮上的输入。

我遇到的问题是我不知道如何改造在所有输入和测试特定验证。

在jQuery中，我会像

那样做

<input data-validation="required" />
$("[data-validation='required']").each(function() {
    if ($(this).val() == ""){
        error = true;
        message = "input is required"
    }
});

我如何在React中执行此操作？

“下面代码的Snippit，代码已被删减为仅相关信息”

      onSubmit() { //This is where I want to validate }


      render() {    
        return (
            <form className="z-depth-4">
                <Row>
                    <Input
                        s={6}
                        label="Company or Trading Name"
                        id="company_name"
                        name="company_name"
                        value={this.props.formData.company_name}
                        onChange={this.handleOnChange}
                        validate
                        required="required"
                        aria-required="true"
                    />
                    <Input
                        s={6}
                        label="Contractor Name (if different to the above)"
                        id="contractor_name"
                        name="contractor_name"
                        value={this.props.formData.contractor_name}
                        onChange={this.handleOnChange}
                        validate
                        required="required"
                        aria-required="true"
                    />
                </Row>
                <Row>
                    <Input
                        s={12}
                        l={6}
                        label="Trade license number"
                        id="trade_licence"
                        name="trade_licence"
                        onChange={this.handleOnChange}
                        validate
                        required="required"
                        aria-required="true"
                    />
                    <Input
                        s={12}
                        l={6}
                        label="NSW Fair Trading contractor licence"
                        id="contractor_licence1"
                        name="contractor_licence1"
                        onChange={this.handleOnChange}
                        validate
                        required="required"
                        aria-required="true"
                    />
                </Row>
                ...
                <Row>
                    <div className="input-field">
                        <button
                            className="btn waves-effect waves-light"
                            type="submit"
                            name="action"
                            onClick={this.submitform}
                        >
                            Submit
                        </button>
                   </div>
                </Row>
            </form>
        );
     }

Answer 1

可能的解决方案可能是这样的。

您可以在容器组件中声明一个本地状态，以保存错误的一些标志：

constructor () {
  this.state = {
    errors: {
      companyName: false,
      contractorName: false,
      tradeLicence: false,
      contractorLicence1: false
    }
  }
}

然后你可以在onSubmit()内部调用一个可以执行验证的函数：

performValidation = () => {
  const {
    company_name,
    contractor_name,
    trade_licence,
    contractor_licence1
  } = this.props.formData

  this.setState({
    errors: {
      companyName: company_name.length === 0,
      contractorName: contractor_name.length === 0,
      tradeLicence: trade_licence.length === 0,
      contractorLicence1: contractor_licence1.length === 0
    }
  })
}

渲染输入时，您可以执行以下操作：

render () {
  const { errors } = this.state
  const { formData } = this.props

  return (
    ...
      <Input
        ...
        value={formData.company_name}
        className={errors.companyName && 'has-error'}
      />
    ...
  )
}

这将是它的要点。如果你有很多字段并且你不想做所有这些手工工作，我们可以找出一个解决方案来迭代formData属性并生成相应错误的映射，然后将它们置于本地状态但它仍然需要一些工作。

React-Redux与Materialise输入验证

1 个答案: