Maxlength 不起作用 React Js

Question

我有一个 React 输入，但是 maxlength 不起作用。有谁知道如何解决这个问题？

这是handleChangeInput

  handleChangeInput(input) {
    this.setState({
        ...this.state,
        form: {
            ...this.state.form,
            [input.target.name]: input.target.value
        }
    })
}

这是我的输入：

 <div className="input-field col s12 m6 l6">
    <input onChange={this.handleChangeInput} value={this.state.form.message} type="text" className="phone validate" name="phone" maxlength="11"/>
    <label for="telefone">Telefone</label>
</div>

原文由 Mike Otharan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

属性名和属性名一般是 camelCase 在 React 中， maxLength 有效。

 <input
  onChange={this.handleChangeInput}
  value={this.state.form.message}
  type="text"
  className="phone validate"
  name="phone"
  maxLength="11"
/>

但是，如果您给输入一个 value 长于 maxLength ，您仍然可以覆盖此选项。解决这个问题的唯一方法是检查回调中 value 的长度，并截断它。

例子

class App extends React.Component {
  state = { form: { message: "" } };

  handleChangeInput = event => {
    const { value, maxLength } = event.target;
    const message = value.slice(0, maxLength);

    this.setState({
      form: {
        message
      }
    });
  };

  render() {
    return (
      <input
        onChange={this.handleChangeInput}
        value={this.state.form.message}
        type="text"
        className="phone validate"
        name="phone"
        maxLength="11"
      />
    );
  }
}

原文由 Tholle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

为了使 maxLength 起作用，类型必须是“文本”（大多数人可能输入数字）

原文由 Micah Friedland 发布，翻译遵循 CC BY-SA 4.0 许可协议