在 React 中将文本区域的最大长度限制为 100

Question

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

How to restrict text area length to 100 chars in react.

Answer 1

You should allow value updating but not directly, as you want to add a restriction to it. So:

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

Assuming event is the new value and this.changeHandler is the state updater, you could do something like this:

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

This will cap the <textarea> character limit to 100 characters.

Answer 4

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

We have to specify attribute like maxLength={100}, then it worked.