Maxlength property of input field is not respected

Question

I have the following React method which should create an input field with a maximum length:

displayInputField: function(name, placeholder, updateMethod, maxLength) {
        return (
            <div className="form-group form-inline">
                <label>{name}</label>
                <input onChange={updateMethod} type="text" className="form-control"
                     maxlength={maxLength} placeholder={placeholder}/>

            </div>
        );
    },

However, the input field generated does not stop me from inputting more characters. Its source is this:

<input type="text" class="form-control" placeholder="<15 characters" data-reactid=".0.1.2.0.0.1.2.1.0.1">

Why is the maxlength attribute not respected?

Answer 1

Your problem here was that you had written maxlength when in JSX it should have been maxLength . This lower camel case approach is the same for all HTML attributes, eg cellPadding , encType , and so on.

Remember, your JSX ultimately is JavaScript; you should read the list of supported tags and attributes if you're not sure.

Answer 2

这对我有用：

<input className="form-control" maxLength={30} size={30} name="subject" />