Проверка Redux-формы проверки при изменении другого поля

Question

Как проверить поле при изменении другого поля и изменить тип проверки.

У меня есть два поля

1. выбор
2. ввод текста

скажем, когда я меняю выбор, проверка запускается, и проверка ввода зависит от того, какой выбор я выбрал.

Если выбор был «Имя», значит, он проверяет Name.lengt.Если выбор был «возраст», значит, он проверяет число.Если выбор был 'email', значит, он проверяет электронную почту.

также, если проверка в порядке, и тогда я изменяю выбор, это должно вызвать ошибку.

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

, когда я изменяюВыбор проверки на входе также должен быть изменен.Это нормально работает, но когда я набираю правильное значение, а затем изменяю выбор, проверка не работает

Answer 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>
    );
  }
}