CODEWITHSUNDEEP
htmlreactjsinput
J.erome
J.erome

Reputation: 788

ReactJS how to limit the input value inline?

I need to limit the possible input values to [0,1,2] but I would really like to do it inline to avoid further issues with my code.

This is my input :

<input
 className="form-control"
 name="labelPred1"
 type="text"
 value={this.state.jsondata.prediction2[k]}
 onChange={e => this.onPred2Change(k, e.target.value)}
/>

I think it won't be possible to do it inline because with my research I found that I should check the content using .match(regex) in my onPred2Change() function, but maybe someone know how to do that directly in the <input> tag

Upvotes: 0

Views: 216

Answers (2)

ZarX
ZarX

Reputation: 1086

If it needs to be a text input and it's not only numbers in a specific order. You can use the pattern attribute that works with most modern browsers.

Example: 

<form>
Numbers: <input pattern="\d*" required title="Numbers only, please." /><br />
Specified values (0,1 or 3): <input pattern="[0,1,3]" required title="0, 1 or 3" /><br />
<button type="submit">Validate and send</button>
</form>

Upvotes: 1

Shahriar
Shahriar

Reputation: 2380

If it's a number, check out html input tag max and min values:

 <input type="number" min="0" max="2">

Upvotes: 1

Related Questions