其他字段更改时的 Redux-form 检查验证答案

【问题标题】：Redux-form check validation when other field changes其他字段更改时的 Redux-form 检查验证
【发布时间】：2019-01-03 06:04:34
【问题描述】：

当其他字段发生变化时如何验证字段并更改验证类型。

我有两个字段

选择
输入文字

假设当我更改选择时，会启动验证并验证输入取决于我选择的选择。

如果选择的是“名称”，那么它会验证 Name.lengt。如果选择是“年龄”，那么它会验证数字。如果选择的是“电子邮件”，那么它会验证电子邮件。

如果验证正常，然后我更改选择，它应该会引发错误。

<form>
<select multiple>
  <option value="age">Volvo</option>
  <option value="email">Saab</option>
  <option value="name">Opel</option>
</select>
 <input type="text"/>
</form>

当我更改选择时，输入上的验证也应该更改。它工作正常，但是当我输入一个有效值然后更改选择时，验证不起作用

【问题讨论】：

写一个函数来接受字段名并做一些简单的if-else检查？
我进行了一些验证，它的工作。但是当我在输入中有一个值并更改选择时，验证不起作用

标签： reactjs react-redux redux-form

【解决方案1】：

如何设置您的组件，以便每次选择新选项时，它都会重置验证并清除输入。

import React from "react";

class Checker extends React.Component {
  state = {
    text: "",
    validated: false,
    currentSelection: null
  };

  //when triggered, will clean up and set the current option to validate
  handleOptionSelected = event => {
    this.setState({
      text: "",
      validated: false,
      currentSelection: event.target.value //the option you picked
    });
  };

  handleOnChange = event => {
    this.setState({
      text: event.target.value
    });
   //write validation logic here
    if (this.state.currentSelection == age) {
      //check logic, setState validated to true
    }
    //repeat for other options
  };

  render() {
    return (
      <div>
        <form>
          <select multiple>
            <option onClick={this.handleOptionSelected} value="age">
              Volvo
            </option>
            <option onClick={this.handleOptionSelected} value="email">
              Saab
            </option>
            <option onClick={this.handleOptionSelected} value="name">
              Opel
            </option>
          </select>
          <input
            onChange={this.handleOnChange}
            type="text"
            value={this.state.text}
          />
        </form>
      </div>
    );
  }
}

【讨论】：