How to attach handler to React Bootstrap select component?

Question

I try to attach event handler to react bootstrap select component bootstrap select component.

class MyComponent extends React.Component {
  constructor(props) {
    super();
    this.state = {
      value: 'initial'
    };
  }
  handleSelect(value) {
    console.log(value);
    this.setState({
      value: value
    });
  }

  render() {
    return (
      <div>
        <div> selected value { this.state.value }</div>
        <FormControl
          componentClass="select"
          placeholder="select"
          onChange={this.handleSelect.bind(this)}
        >
          <option value="test" eventKey="select">select</option>
          <option value="asdas" eventKey="other">...</option>
        </FormControl>
      </div>
    );
  }
}

but in handleSelectinstead of clicked option value I get some Proxy object.

Here is CodePen showing the problem.

What is the proper way of attaching handlers to FormControl?

madox2 · Accepted Answer · 2017-04-28 14:05:47Z

2

First argument in the onChange event handler is event object. You can access the selected value by looking at event target - evt.target.value:

handleSelect(evt) {
  console.log(evt.target.value);
  this.setState({
    value: evt.target.value
  });
}

answered Apr 28, 2017 at 14:05

madox2

52.3k21 gold badges106 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to attach handler to React Bootstrap select component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related