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)}
/>;

如何在响应中将文本区域的长度限制为100个字符。

Answer 1

您可以将JSX maxLength属性用作maxLength =“ 100”

Answer 2

您应该允许值更新，但不允许直接更新，因为您想对其进行限制。因此：

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 3

假设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个字符。

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>

我们必须指定诸如maxLength = {100}之类的属性，然后它才起作用。

Answer 5

仅在处理程序中使用slice(0, 100)使其完全受控

  const [value, setValue] = useState("");
  const onChange = e => {
    setValue(e.currentTarget.value.slice(0, 100));
  };
  return (
    <textarea
      value={value}
      onChange={onChange}
    />
  );

---