web-dev-qa-db-fra.com

Maxlength ne fonctionne pas React Js

J'ai une entrée avec React, mais maxlength ne fonctionne pas. Quelqu'un sait-il comment résoudre ceci?

Il s'agit de handleChangeInput

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

Et voici mon entrée:

<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

Les noms de propriété et d'attribut sont généralement camelCase dans React, maxLength fonctionne.

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

Cependant, vous pouvez toujours remplacer cette option si vous donnez à l'entrée un value plus long que maxLength. La seule façon de contourner ce problème est de vérifier la longueur de value dans le rappel et de la tronquer.

Exemple

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

pour que maxLength fonctionne, le type doit être 'text' (la plupart des gens mettent probablement des nombres)

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

Vous devez passer la valeur maxLength sous la forme nombre.

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