Ограничить максимальную длину текстовой области до 100 в React

Question

<textarea
  className="form-control round InputActive textarea"
  id="txtarea-dwip-service-description"
  name="ServiceDescription"
  value={model.ServiceDescription}
  onChange={event => this.changeHandler(event)}
/>;

Как ограничить длину текстовой области до 100 символов в реакции.

Answer 1

Вы должны разрешить обновление значения, но не напрямую, так как вы хотите добавить к нему ограничение. Итак:

const [value, setValue] = useState('')

const handleChange = (event) => {
  const shouldSetValue = value.length < 100

  if (shouldSetValue) setValue(event.target.value)
}

<textarea
  className="form-control round InputActive textarea"
  id="txtarea-dwip-service-description"
  name="ServiceDescription"
  value={model.ServiceDescription}
  onChange={handleChange}
/>;

Answer 2

Вы можете использовать свойство JSX maxLength как maxLength = "100"

Answer 3

                            <textarea maxLength={100} className="form-control round InputActive textarea" id="txtarea-dwip-service-description"
                                name="ServiceDescription" value={model.ServiceDescription} onChange={(event) => this.changeHandler(event)} 
                                ></textarea>

Мы должны указать атрибут вроде maxLength = {100}, тогда он сработает.

Answer 4

Предполагая, что event - это новое значение, а this.changeHandler - это средство обновления состояния, вы можете сделать что-то вроде этого:

 <textarea
    maxLength={10}
    className="form-control round InputActive textarea"
    id="txtarea-dwip-service-description"
    name="ServiceDescription"
    onChange={event => this.changeHandler(event)}
    value={model.ServiceDescription} />

Это ограничит ограничение <textarea> в 100 символов.