Reactjs Maxlength 不起作用 React Js

 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>

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

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

Reactjs相关问答推荐

无法覆盖MUI工具栏上的左右填充，除非使用！重要

在Reaction常量函数中未更新状态变量

如何在react 流中使用文本区域和改变 node 的输入大小？

需要特定的数学函数来标准化动画持续时间

如何使用useState响应快速/顺序状态更新

为什么我得不到我想要的数据？

找不到名称setCometChat

我从 S3 存储桶下载图像时收到错误

如何管理可重用无线电输入的 React 状态？

数据表格组件需要所有行都具有唯一的ID属性.或者，您可以使用getRowId属性.

useState数组不更新

如何在不重新加载页面的情况下加载新添加的数据？

使用 Vite 的 React 中的路由无法正常工作(构建中)

意外的标记.您可能需要一个合适的加载器来处理这种文件类型.书？.img？ /*#__PURE__*/React.createElement("img",

在 redux 中分派到另一个减少时状态值不会改变

在 Formik 表单中访问子组件的值

谁能根据经验提供有关 useEffect 挂钩的更多信息

如何定制 React 热 toastr ？

我在使用 Elements of stripe 时使用 React router v6

下拉菜单在 AppBar 中未正确对齐