使用类似于 onSelect() 的 onChange() 将 select 值打印到控制台

Question

I am trying to print the value of the select to the console. I was able to do this in an onSelect() method however the onChange() method seems to return an empty object.

My unsuccessful attempt at the onChange() method:

<Form.Group controlId="exampleForm.ControlSelect1">
  <Form.Label>Example select</Form.Label>
  <Form.Control as="select" onChange={function(obj){console.log(obj)}}>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </Form.Control>
</Form.Group>

Example) If user selects 'Link 1' from the select, the onSelect() method would print the eventKey 'Link1' to the console.

<DropdownButton id="dropdown-item-button" title="Links" onSelect={function(evt){console.log(evt)}}>
  <Dropdown.Item as="button" eventKey='Link1'>Link 1</Dropdown.Item>
  <Dropdown.Item as="button" eventKey='Link2'>Link 2</Dropdown.Item>
  <Dropdown.Item as="button" eventKey='Link3'>Link 3</Dropdown.Item>
</DropdownButton>  

Answer 1

In order to ger the value you need to check the target of the event. I have done this with your first example.

<Form.Group controlId="exampleForm.ControlSelect1">
  <Form.Label>Example select</Form.Label>
  <Form.Control as="select" onChange={(obj) => console.log(obj.target.value)}>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </Form.Control>
</Form.Group>

What this does is gets the caller of the event which is your select, then gets the selected value from that.

EDIT: I should mention I've used a lambda function within the Select control however this works just as effectively:

onChange={function(obj) {
    console.log(obj.target.value);
  }
}