Maxlength property of input field is not respected
Ad
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?
Ad
Answer
Ad
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, e.g. 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.
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad