How to get a typed value from an Input?

reactstrap
Sophie picture Sophie · Dec 12, 2017 · Viewed 9.5k times · Source

I would like to get a typed value from a ReactStrap Input component, via the onChange function. The aim is to use a text input only but be able to get a specific typed value (String or Number in my example below).

<Input valueAs="String" name="input1" type="text" onChange={this.onChange}></Input>
<Input valueAs="Number" name="input2" type="text" onChange={this.onChange}></Input>

You can see the expected type is defined by the valueAs attribute. I expect to get an event in this.onChange with:

  • a value as a String for Input 1
  • a value as a Number for Input 2

What is the best way to do this with React / Reactstrap?

Answer

iamawebgeek picture iamawebgeek · Feb 28, 2018

Input component of reactstrap does not have a property called valueAs. To get value in a format you need, you can do:

<Input name="input1" type="text" onChange={(e) => this.onChange(`${e.target.value}`)}/>
{/* to make it integer you can add unary plus sign like so: */}
{/* this.onChange(+e.target.value) */}

Related questions

What is difference between reactstrap and react-bootstrap?

I found two different bootstraps for reactjs npm install --save reactstrap react react-dom npm install react-bootstrap bootstrap What is the basic and main difference between both?

Read More
How to change background colors in Reactstrap

I am using react strap to help style an application I'm creating, however I can't figure out how to change the background color of the nav from white to black. I have tried to color ="dark" in the nav tabs …

Read More
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>

I'm trying to use react-router with reactstrap in a create-reat-app .In the routing page i needed to use state for the reactstrap so i converted the router from a variable to a class.I get this warning : Warning: validateDOMNesting(...): <…

Read More