Как получить ограничение на количество символов, включая имя по умолчанию Reactjs

Question

Я пытаюсь получить ограничение по количеству символов для поля ввода, но поле ввода имеет значение по умолчанию.

, если ограничение по количеству символов превышает текст, должно отображаться с пределом 0 (не всплывающее окно)

, еслиЯ использую приведенный ниже код, он не работает нормально для моих требований (скажем, значение по умолчанию уже существует).

Могу ли я узнать, как включить значение по умолчанию и установить сообщение, если оно достигнет 0

class Company extends React.Component {
state = {
      Title: this.props.selectedTable.Title,
      chars_left: 50,
      max_char:50
    }

   handleCharacterCount= (event) => {
    const charCount = event.target.value.length;
    const maxChar = this.state.max_char;
    const charLength = maxChar - charCount;
    this.setState({ chars_left: charLength });
    //this.setState({sTitle: e.target.value});
   }
   render() {
    return (
     <div>
      <textArea
        type="text"
        maxLength="50"
        required
        onChange={this.handleCharacterCount}
        value={this.state.Title}/>
      />
      <p>{this.state.chars_left}</p>
    </div>
  )
 }
}

Answer 1

Вы можете попробовать это

state = {
  Title: this.props.selectedTable.Title,
  chars_left: 50 - this.props.selectedTable.Title.length,
  max_char:50
}



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



render() {
return (
 <div>
  <textArea
    type="text"
    maxLength="50"
    required
    onChange={this.handleCharacterCount}
    value={this.state.Title}/>
  />
  {
    !this.state.chars_left &&
      <p>text has to appear at 0 limit</p>
  }
  <p>{this.state.chars_left}</p>
</div>)}