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;

Answer 2

好，所以这里有些问题。

import React, { Component } from "react";
import { render } from "react-dom";

class TextBox extends Component {
  constructor(props){
    super(props);
    // 1.
    // You only need to store the `isValid` property.
    // The value is needed only for the validation, right?
    this.state = {
      isValid: false
    }
  }

  onChange(e) {
    const { target } = e;
    const { value } = target;
    // 2.
    // If the value is in the right range : isValid = true
    // else : isValid = false
    if( value > 100 && value < 200 ) {
      this.setState({ isValid: true });
    } else {
      this.setState({ isValid: false });
    }
  }

  render() {
    // 3. 
    // Always use destructuring. It's way easier to follow ;)
    const { type } = this.props;
    const { isValid } = this.state;
    return (
      <Fragment>
        <input 
          type={type}
          onChange={e => this.onChange(e)} 
        />
        {/* 4. */}
        {/* Assign the right text to your tooltip */}
        <p>{ isValid ? "valid" : "invalid" }</p>
      </Fragment>
    );
  }
}

ReactDOM.render(
  <TextBox type="number" />,
  document.getElementById('root')
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

我简化了示例，以便更容易理解。

Here is a working example

Answer 3

我认为您首先需要将有效设置为false

state = {
valid: false,
value: ''
}

根据最后输入的值而不是当前值对输入验证进行反应

3 个答案: