javascript - 根据最后输入的值而不是当前值对输入验证进行 react 检查

Question

我正在尝试验证我的输入，如果数字在 100 到 200 之间应该显示有效或无效，我遇到的问题是它似乎正在检查最后输入的值，例如，如果用户输入 1222 这将显示有效，因为我相信它实际上是在检查最后输入的数字 122 并且如果我然后删除 2 个字符所以它显示 12 这也将显示有效。我相信这是因为状态是如何设置的，但我不确定如何正确地让它工作。

我如何更改它以便它检查正确的值并正确验证？

Textbox.js

class TextBox extends React.Component {
  state = {
    valid: '',
    value: ''
  }

  onChange = (event) => {
    this.props.onChange(event.target.value);
    this.validation()
  }

  validation() {
   (this.props.value > 100 && this.props.value < 200) ? this.setState({value: this.props.value}) : this.setState({value: this.props.value})
  }

  onChangeInput(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    }, () => console.log(this.state.mail === this.state.confMail));
  }
  render() {
    return (
      <Box
        invalid={!this.props.isValid}
      >
        <Label
          rollo={this.props.designation === 'rollo'}
          pleating={this.props.designation === 'pleating'}
        >{this.props.label}</Label>
          <span>
            <Input
              type={this.props.type && this.props.type}
              defaultValue={this.props.defaultValue}
              onChange={this.onChange}
              placeholder={this.props.placeholder}
              value={this.props.value || ''}
            />
          <Tooltip>{this.state.valid}</Tooltip>
        </span>
      </Box>
    );
  }
};

export default TextBox;

component.js

<TextBox
  type="number"
  label="Fenstertyp"
  defaultValue={ this.props.height / 100 * 66 }
  onChange={newValue => this.props.selectOperationChainLength(newValue)}
  tooltip="invalid"
  value={this.props.operationChainLength.value}
/>

actions.js

export function selectOperationChainLength(operationChainLength) {
  return {
    type: SELECT_OPERATION_CHAIN_LENGTH,
    operationChainLength
  }
}

Answer 1

您可以将验证逻辑转移到 event.target.value 上的 onChange 方法，无需创建单独的方法。它将看起来像这样。

class TextBox extends React.Component {
  state = {
    valid: false,
    value: ''
  }

  onChange = (event) => {
    const value = event.target.value;
    (value > 100 && value < 200) ? this.setState({value, valid: true}) : this.setState({value, valid: false})
    this.props.onChange(value);
  }

  onChangeInput(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    }, () => console.log(this.state.mail === this.state.confMail));
  }
  render() {
    return (
      <Box
        invalid={!this.props.isValid}
      >
        <Label
          rollo={this.props.designation === 'rollo'}
          pleating={this.props.designation === 'pleating'}
        >{this.props.label}</Label>
          <span>
            <Input
              type={this.props.type && this.props.type}
              defaultValue={this.props.defaultValue}
              onChange={this.onChange}
              placeholder={this.props.placeholder}
              value={this.props.value || ''}
            />
          <Tooltip>{this.state.valid}</Tooltip>
        </span>
      </Box>
    );
  }
};

export default TextBox;