Getting Data From React-Bootstrap Input

Question

I am not finding good docs or videos on how to get data from my inputs with React-Bootstrap. I want to be able to click the button and then bring what I typed into the input box into my onClick function.


import React    from "react";
import Button from 'react-bootstrap/Button';
import './Search.css';
import InputGroup from 'react-bootstrap/InputGroup';
import FormControl from 'react-bootstrap/FormControl';


class search extends React.Component {
    constructor(props){
      super(props);
  this.text = React.createRef(); 

  this.searchChar = this.searchChar.bind(this);
}  

searchChar = () => {
  console.log("Button Clicked")
  const value = this.input.current.value; 
  console.log(value)
}



  render() {

    return (
    <div className="searchBar">
    <form>
    <InputGroup className="mb-3">
    <InputGroup.Prepend>
      <InputGroup.Text id="basic-addon1">Character Search</InputGroup.Text>
    </InputGroup.Prepend>
    <FormControl ref = {this.input}
      placeholder="Character Name"
      aria-label="Character Name"
      aria-describedby="basic-addon1"
    />
  </InputGroup>
      <Button onClick={this.searchChar(this.input)} variant="outline-danger">Search </Button>
    </form>
    </div>
    );
  }
}

export default search;

score 1 · Accepted Answer · answered Mar 29 '20 at 15:58

Just try to write your input values in state

for example;


import React    from "react";
import Button from 'react-bootstrap/Button';
import './Search.css';
import InputGroup from 'react-bootstrap/InputGroup';
import FormControl from 'react-bootstrap/FormControl';


class search extends React.Component {
    constructor(props){
      super(props);
      this.state = {
          basicAddon1 : null,
      };
}  

searchChar = () => {
  console.log("Button Clicked")
  const value = this.state.basicAddon1;
  console.log(value)
}



  render() {

    return (
    <div className="searchBar">
    <form>
    <InputGroup className="mb-3">
    <InputGroup.Prepend>
      <InputGroup.Text id="basic-addon1">Character Search</InputGroup.Text>
    </InputGroup.Prepend>
    <FormControl
      placeholder="Character Name"
      aria-label="Character Name"
      aria-describedby="basic-addon1"
      onChange={event => {
            this.setState({
               basicAddon1 : event.target.value
            });

        }} 
     value={this.state.basicAddon1 ? this.state.basicAddon1 : ""}
    />
  </InputGroup>
      <Button onClick={this.searchChar(this.input)} variant="outline-danger">Search </Button>
    </form>
    </div>
    );
  }
}

export default search;

you can create inputChangeHandler function or something else for improve your code it just basic

This did work but I am curious why every time I change the input and there is a change why does searchChar function run? How would I get this function to only run when the button is clicked? — BOPMT, Apr 03 '20 at 03:34

score 0 · Answer 2 · answered Sep 29 '20 at 14:32

The same way you deal with getting data from a form in pure React, you do with react-bootstrap. This answer here shows many options to do so. My favourite approach among those options is this one. Using that approach your code would be something like:

class search extends React.Component {
constructor(props) {
    super(props)
    this.handleSave = this.handleSave.bind(this)
}

onChange(event) {
    // Intended to run on the change of every form element
    event.preventDefault()
    this.setState({
        [event.target.name]: event.target.value,
    })
}

handleSave() {
    console.log(`Do something with : {this.state.characterName}`)
}

render() {
    return (
        <div className="searchBar">
            <form>
                <InputGroup className="mb-3">
                    <InputGroup.Prepend>
                        <InputGroup.Text id="basic-addon1">
                            Character Search
                        </InputGroup.Text>
                    </InputGroup.Prepend>
                    <FormControl
                        name="characterName"
                        placeholder="Character Name"
                        aria-label="Character Name"
                        aria-describedby="basic-addon1"
                        onChange={this.onChange.bind(this)}
                    />
                </InputGroup>
                <Button onClick={this.handleSave} variant="outline-danger">
                    Search{' '}
                </Button>
            </form>
        </div>
    )
}

}

Getting Data From React-Bootstrap Input

2 Answers2