How to get an input value using "refs" in react-bootstrap form?

Question

I'm trying to create a form that appears in modal. So when user input a value, that value is stored in local storage. Here's a picture that help's you to understand what I mean:
Here is the code of the form:

function FieldGroup({id, label, help, ...props}) {     return (         <ReactBootstrap.FormGroup controlId={id}>             <ReactBootstrap.ControlLabel>{label}</ReactBootstrap.ControlLabel>             <ReactBootstrap.FormControl {...props} />             {help && <ReactBootstrap.HelpBlock>{help}</ReactBootstrap.HelpBlock>}         </ReactBootstrap.FormGroup>     ); }  const formInstance = (     <form>         <FieldGroup             id="formControlsText"             type="text"             label="Text"             placeholder="Recipe Name"             inputRef={ref => { this.input = ref; }}         />         <ReactBootstrap.FormGroup controlId="formControlsTextarea">             <ReactBootstrap.ControlLabel>Ingredients</ReactBootstrap.ControlLabel>             <ReactBootstrap.FormControl componentClass="textarea" placeholder="Enter Ingredients" />         </ReactBootstrap.FormGroup>     </form> );   

As I've read in bootstrap React tutorial, I should add
<FormControl inputRef={ref => { this.input = ref; }} /> to the FormControl props. But after adding it I get an error when modal form is invoked:

`

Answer 1

I just made this issue. My code:

<FormControl     componentClass="input"     placeholder="Enter recipe title"     inputRef={(ref) => {this.input = ref}}     defaultValue={title}/> </FormGroup> 

And then you can get the value from <FormControl> in some handler like this:

console.log(this.input.value); 

Details can be found in my repo: https://github.com/kerf007/recipebook

Answer 2

I have same problem with you, and this is my solution

const FieldGroup = ({id, label, help, inputRef, ...props}) =>   <FormGroup controlId={id}>     <ControlLabel>{label}</ControlLabel>     <FormControl {...props} inputRef={inputRef}/>     {help && <HelpBlock>{help}</HelpBlock>}   </FormGroup> 

and my form

<form>     <FieldGroup         id="bookName"         type="text"         label="Name"         placeholder="Enter name..."         inputRef = {(input) => this.inputName = input }      />     <FieldGroup         id="bookAuthor"         label="Author"         type="text"         placeholder="author 's name..."         inputRef={(input) => this.inputAuthor = input}      /> </form> 

then you can get book 's name and author 's name value by:

this.inputName.value and this.inputAuthor.value