Question

当其他字段更改和更改验证类型时如何验证字段。

我有两个字段

选择
输入文字

比如说，当我更改选择时，将启动验证并根据我选择的选择来验证输入。

如果选择的是“名称”，则它将验证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>

当我更改选择时，对输入的验证也应更改。一切正常，但是当我键入一个有效值然后更改选择内容时，验证将无法正常工作

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

其他字段更改时的Redux表单检查验证

1 个答案: