javascript - 如果为空或数字，则 react 输入验证

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

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

如此可扩展的解决方案(您可以通过将它们添加到状态来添加更多控件)可能如下所示:

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