In-depth Analysis and Solutions for maxLength Property Failure in React

Problem Background and Phenomenon Analysis

During React development, developers frequently encounter situations where the maxlength attribute of form input fields fails to function properly. As shown in the user's question, even when setting maxlength="11" according to HTML standards, the input field still allows characters beyond the specified length. This phenomenon typically stems from misunderstandings about React's property naming rules.

Core Cause: JSX Property Naming Convention

React extends JavaScript using JSX syntax, where HTML attributes must follow camelCase naming conventions. Unlike the native HTML maxlength attribute, React requires maxLength. This discrepancy is the fundamental reason for property failure. The following code demonstrates the correct property syntax:

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

It's worth noting that while passing the value as a string (e.g., maxLength="11") works, React documentation recommends using the number type: maxLength={11}. This ensures type consistency and avoids potential implicit conversion issues.

Length Restriction Implementation in Controlled Components

Merely setting the maxLength property is insufficient to fully control input length, especially in controlled components. If values exceeding the limit are set directly via setState, the browser will still display these characters. Therefore, proactive truncation of input values within the event handler is necessary.

The following is a complete implementation example:

class FormComponent extends React.Component {
  state = { 
    form: { 
      phone: "" 
    } 
  };

  handleChangeInput = (event) => {
    const { value, maxLength } = event.target;
    const truncatedValue = value.slice(0, maxLength);

    this.setState({
      form: {
        phone: truncatedValue
      }
    });
  };

  render() {
    return (
      <div className="input-field col s12 m6 l6">
        <input
          onChange={this.handleChangeInput}
          value={this.state.form.phone}
          type="text"
          className="phone validate"
          name="phone"
          maxLength={11}
        />
        <label htmlFor="phone">Telefone</label>
      </div>
    );
  }
}

This implementation ensures that even if users attempt to input more than 11 characters, the actually stored and displayed values are automatically truncated. It also fixes issues in the original code regarding the for attribute (should use htmlFor) and inconsistent state key names.

Additional Considerations

Beyond naming conventions, the following points require attention:

1. The maxLength property primarily applies to input fields with type="text". For numerical inputs (type="number"), use the max property to control maximum values.
2. In functional components, the same functionality can be achieved using useState and useCallback, while maintaining consistent core logic.
3. For scenarios requiring more complex validation, consider combining maxLength with form validation libraries like Formik or React Hook Form.

Best Practices Summary

To ensure reliable input length restriction in React applications:

• Always use maxLength (camelCase) instead of maxlength
• Pass values as number types: maxLength={11}
• Proactively truncate input values within controlled component event handlers
• Keep the value property synchronized with state
• Use htmlFor instead of the for attribute

By adhering to these principles, developers can build robust, predictable form input components that effectively prevent users from entering content beyond expected lengths.