React js character limitation

问题

Im trying to implement a chartercter limit for a textArea in react js here is my code.

state = {
  chars_left: 140;
}

handleWordCount = event => {
  const charCount = event.target.value.length;
  const maxChar = this.state.chars_left;
  const charLength = maxChar - charCount;
  this.setState({ chars_left: charLength });
}

<textArea
  rows={6}
  type="text"
  maxLength="140"
  required
  onChange={this.handleWordCount}
/>

{${this.state.chars_left}}

I have a function that should that show how many character the user is typing and it starts at 140 but it skips tons numbers every time i type something like 130 when i type a single character

what could the problem be?

回答1:

the problem is you are keep updating the chars_left attribute based on the old value

follow will work as expected

state = {
   chars_left: 140;
}

handleWordCount = event => {
    const charCount = event.target.value.length;
    const charLeft = 140 - charCount;
    this.setState({ chars_left: charLeft});
}

My example code can be improved by dynamically getting the maxlengt attr

回答2:

That was happening because everytime your were trying to subtract the number of characters that are there in textare from characters left. Define a new variable or state called max_char and get char_left by subtracting length from max_char. Also you dont need to write this.state.char_left in backticks since you are already using {}

class App extends React.Component {
    state = {
          chars_left: 140,
          max_char:140
        }

       handleWordCount = event => {
        const charCount = event.target.value.length;
        const maxChar = this.state.max_char;
        const charLength = maxChar - charCount;
        this.setState({ chars_left: charLength });
  }
   
   
   render() {

      return (
         <div>
          <textArea
            rows={6}
            type="text"
            maxLength="140"
            required
            onChange={this.handleWordCount}
          />
          <p>{this.state.chars_left}</p>
        </div>
     )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

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

回答3:

The problem is that you are basically using one variable to keep track of both the max number of characters, but also for how many chars remain.

I would also change maxLength in your textArea to use the state variable, instead of hard-coding it.

Try using two variables for this, like in the example below:

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {chars_left: 140, max_chars: 140};
  }
  
  handleWordCount = event => {
    const charCount = event.target.value.length;
    const maxChar = this.state.max_chars;
    const charLength = maxChar - charCount;
    this.setState({chars_left: charLength});
  }
  
  render() {
    return (
      <div>
        <textArea
          rows={6}
          type="text"
          maxLength={this.state.max_chars}
          required
          onChange={this.handleWordCount}
        />
        <div>{this.state.chars_left}</div>
      </div>
    );
  }
};

ReactDOM.render(<MyApp />, document.getElementById('myapp'));

<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>

<div id="myapp"></div>

Though, I would make another small change:

this.state = {chars_left: null, max_chars: 140};
...
<div>{this.state.chars_left || this.state.max_chars}</div>

This way chars_left doesn't need to know what max_chars is set to, and you have 1 less variable to manage should the limit change in the future.

来源：https://stackoverflow.com/questions/43777555/react-js-character-limitation

标签

javascript

reactjs

char