在 React 中比较整数而不是字符串

Question

我有一个 React 应用程序，基本上我想做的是输入中的条件语句。如果超过 5 个字符，我会在输入中键入文本；它会说 'Its long enough' 但它将文本视为整数值。当我输入 6 时，它又说足够长了。

这是我的组件：

class App extends Component {

  state = {
    userInput : ''
  }

inputChangedHandler = (event) => {
  this.setState({userInput: event.target.value})
}


 render(){

  return (
    <div className="App">
          <input
          type="text"
          onChange={this.inputChangedHandler} 
          value={this.state.userInput}/>
          <p>{this.state.userInput}</p>
          <Validation inputLength = {this.state.userInput}/>
           
    </div>
  );
 }
}

export default App;

我有一个验证组件如下所示：

import React from 'react';

const validation = (props) => {


    let validationMessage = 'Text too short!';

    if(props.inputLength > 5){
        validationMessage= 'Text long enough!';
    }

    return (
        <div>
            {
               <p>{validationMessage}</p>
            }
        </div>

    )
};

export default validation;

我这里做错了什么？

Answer 1

您似乎忘记访问 this.state.userInput 的 .length 属性。

替换

<Validation inputLength = {this.state.userInput}/>

与

<Validation inputLength = {this.state.userInput.length}/>

在 React 中比较整数而不是字符串

Compares integers instead of string in React

javascript

components

dom-events

reactjs