What to do if react+maxlength does not take effect

The solution for react maxlength not taking effect: 1. Open the corresponding react file; 2. Change "maxlength" to "maxLength", the code is like "0bbd7859cece878b1a9f55899248319296ac42c95369ad8c9dbbd274b6bcc83a".

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What should I do if react maxlength does not take effect?

Problem description:

I have a React input, but maxlength doesn't work. Does anyone know how to solve this problem?

This is handleChangeInput

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

This is my opinion:

<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>

Problem solution:

Change maxlength into maxLength! Note the capital L.

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

React uses camelCased html attribute, so maxlength will be maxLength.

Recommended learning: "react video tutorial"

The above is the detailed content of What to do if react+maxlength does not take effect. For more information, please follow other related articles on the PHP Chinese website!