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>

Answer 1

属性和属性名称在React中通常是camelCase，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"
      />
    );
  }
}

Answer 2

要使maxLength正常工作，类型必须为“文本”（大多数人可能会输入数字）

Answer 3

只需在您的 handleOnChange 函数中这样做：

 handlePasswordChange = (e) => {
    if(e.target.value <= 11){
    this.setState({
      [e.target.name]: e.target.value
    });
   }
  };

Answer 4

您需要将maxLength值作为数字传递。

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

Answer 5

inputProps = {{maxLength:6}}
variant="outlined"

Answer 6

对于任何使用reactstrap输入的人，就像它使用的其他属性（例如colSpan）一样，它既需要驼峰命名，也需要传递一个数字（例如maxLength = {250}），而不是字符串。我发现传递一个字符串可以用，但是React会抱怨它。

Answer 7

<input
    id="ZIPCode"
    className="form-control"
    type="text"
    maxLength={10} // this is the important line
></input>

Maxlength不起作用React Js

7 个答案: