web-dev-qa-db-ja.com

Maxlengthは機能しませんReact Js

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>

Code preview

javascripthtmlreactjs
7
MKOT

通常、プロパティ名と属性名は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"
      />
    );
  }
}
21
Tholle

maxLengthが機能するためには、タイプは 'text'でなければなりません（ほとんどの人はおそらく数値を入力しています）

14
Micah Friedland
inputProps = {{maxLength:6}}
variant="outlined"
0
aakash sharma

MaxLength値をnumberとして渡す必要があります。

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