Question

我创建了此方法，该方法获取计算器输入的状态并检查其是否为空。我在两件事上需要帮助：

在此处添加验证以检查每个输入是否也是数字和输出以及错误“输入必须是数字”的最干净方法是什么

当前，我有一条错误消息，该错误消息将触发是否所有输入都存在，我想要的是它分别验证每个输入并在每个输入下引发错误。我该怎么做，但仍要保持此功能简洁？

       constructor(props) {
        super(props);
        this.state = {
            price: 0,
            downP: 0,
            term: 0,
            interest: 0,
            error: ''
        };
    }

 handleValidation = () => {
                const {
                    price,
                    downP,
                    loan,
                    interest,
                } = this.state;
                let error = '';
                let formIsValid = true;
                    if(!price || 
                        !downP ||
                        !loan ||
                        !interest){
                        formIsValid = false;
                        error = "Input fields cannot be empty";
                    } 

       this.setState({error: error});
      return formIsValid;
    }

然后这是错误消息

     <span style={{color: "red"}}>{this.state.error}</span>

Answer 1

您可以这样做：

  handleValidation() {
      const { price, downP,loan, interest} = this.state;

      // only each block with generate error
      if (!price || isNaN(price)) {
        this.setState({ error: 'price is not valid' });
      } else if (!downP || isNaN(downP)) {
        this.setState({ error: 'downP is not valid' });
      } else {
        this.setState({error: ""})
        // submit code here
      }
  }

注意：您不需要返回任何内容。它将更新错误状态并且仅当它进入没有错误提交表单（否则{}）部分

和用于渲染（）部分补充一点：

{(this.state.error !== '')
      ? <span style={{color: "red"}}>{this.state.error}</span>
      : ''
}

如果你想在每加errPrice，errDownP等的状态验证味精，并检查他们在渲染像(this.state.errPrice!== '') {}等。

Answer 2

一种假设您想要一种尺寸的解决方案仅通过检查是否为数字来适合所有错误消息，那就是将它们放入数组并在输入不是数字的情况下设置错误。

const inputs = [ price, downP, loan, interest ]

inputs.map(input => {
  if (!input || isNaN(input)){
    error = "Input must be a number"
    formIsValid = false
  }
}

this.setState({error})

类似的东西。

Answer 3

处理需要验证的多个对象的直接方法是在您的状态下存储errors对象，该对象具有每个输入字段的属性。然后，根据是否有错误，在每个输入字段下方有条件地呈现错误。这是一个非常基本的示例：

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      price: 0, downP: 0, term: 0, interest: 0,
      errors: { price: '', downP: '', term: '', interest: '' }
    };
  }

  handleValidation = () => {
    const { price, downP, loan, interest } = this.state;
    let errors = { price: '', downP: '', term: '', interest: '' };

    if (!price) {
     errors.price = 'Price is required';
    } else if (isNaN(price)) {
      errors.price = 'Price must be a number';
    }

    if (!downP) {
      errors.downP = 'Down Payment is required';
    }

    // Rest of validation conditions go here...

    this.setState({ errors });
  }

  render() {
    const { errors } = this.state;

    return (
      <form>
        <input name="price" value={this.state.price} onChange={this.handleChange} />
        {errors.price != '' && <span style={{color: "red"}}>{this.state.errors.price}</span>}
        <input name="downP" value={this.state.downP} onChange={this.handleChange} />
        {errors.downP != '' && <span style={{color: "red"}}>{this.state.errors.downP}</span>}

        {/** Rest of components go here */}
      </form>
    );
  }
}

您可以选择在表单提交后或每次按键时是否运行验证，这将影响这些消息出现和消失的时间，但这应该使您对如何管理特定于每个输入的错误消息有所了解字段。

Answer 4

如果您想将错误消息分开保存，我建议您重新组织您的状态。

因此可扩展的解决方案（您可以通过将它们添加到状态中来添加更多控件）可能看起来像：

class NumberControlsWithErrorMessage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputs: [
        { name: 'price', value: 0, error: ''},
        { name: 'downP', value: 0, error: '' },
        { name: 'term', value: 0, error: '' },
        { name: 'interest', value: 0, error: '' }
      ]
    };
  }

  handleInputChange = (idx, event) => {
    const target = event.target;
    const name = target.name;
    let error = '';

    if (isNaN(target.value)) {
      error = `${name} field can only be number`
    }

    if (!target.value) {
      error = `${name} field cannot be empty`
    }

    this.state.inputs[idx] = {
      ...this.state.inputs[idx],
       value: target.value,
      error
    }

    this.setState({
      inputs: [...this.state.inputs]
    });
  }

  render() {
    return (
      <form>
        {this.state.inputs.map((input, idx) => (
          <div>
          <label htmlFor="">{input.name}</label>
          <input type="text" value={input.value} onChange={(e) => this.handleInputChange(idx, e)}/>
          {input.error && <span>{input.error}</span> }
          </div>
        ))}
      </form>
    );
  }
}

Working example

另外，如果您要构建复杂的表单，则可能要尝试一些针对表单的React解决方案，其中已经为您处理了用于监听事件，状态更新和验证的所有机制。像reactive-mobx-form

如果输入为空或数字，则反应输入验证

4 个答案: