javascript - 使用类似于 onSelect() 的 onChange() 将选择值打印到控制台

Question

我正在尝试将选择的值打印到控制台。我能够在 onSelect() 方法中执行此操作，但是 onChange() 方法似乎返回一个空对象。

我对 onChange() 方法的失败尝试:

<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>

示例)如果用户从选择中选择“Link 1”，onSelect() 方法会将 eventKey“Link1”打印到控制台。

<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

为了获取值，您需要检查事件的目标。我已经用你的第一个例子做到了这一点。

<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>

它的作用是获取您选择的事件的调用者，然后从中获取选定的值。

编辑:我应该提到我在 Select 控件中使用了 lambda 函数，但这同样有效:

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