javascript - ReactJS如何验证所有输入然后提交

Question

我正在ReactJS中处理form，我有多个输入(在 fiddle 中它只是一个演示，它是真实代码中大约有 10-15 个输入) 我想验证所有输入，如果所有输入都有效，则提交/POST 到 api，到目前为止我尝试的是这个 JSFiddle

handleChange = (e) => {
  if (e.target.value.length >= 5) {
    this.setState({
      submit: true
    })
  } else {
    this.setState({
      submit: false
    })
  }
}

因此，为此，我定义了一个名为 submit 的状态，如果 submit 为 true，表单将提交并调用 API 。问题是，如果用户填写并有效输入之一，submit 设置为 true，但我希望当用户验证所有输入时，submit 应该设置为true。

Answer 1

您应该有组件状态来管理输入的验证。下面是我使用你的代码并进行了编辑:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      submit: false,
      isValid: {
        "1": false,
        "2": false,
        "3": false,
        "4": false,
        "5": false
      }
    };
  }

  handleSubmit = e => {
    e.preventDefault();
    if (this.state.submit) {
      alert("POSTED TO API");
    } else {
      alert("fill the form!");
    }
  };

  checkValid = () => {
    if (
      Object.values(this.state.isValid).filter(value => !value).length === 0
    ) {
      this.setState({ ...this.state, submit: true });
    }
  };

  handleChange = (e, item) => {
    if (e.target.value.length >= 5) {
      this.setState(
        {
          ...this.state,
          isValid: { ...this.state.isValid, [`${item}`]: true }
        },
        this.checkValid
      );
    }
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        submit is: {this.state.submit ? "true" : "false"}
        <br />
        {[1, 2, 3, 4, 5].map(item => {
          return (
            <input
              name={"field" + item}
              type="text"
              onChange={e => {
                this.handleChange(e, item);
              }}
            />
          );
        })}
        <input type="submit" value="ok" />
      </form>
    );
  }
}

export default App;