React ES6：使用语义 UI 在下拉列表中获取选定值答案

【问题标题】：React ES6: Get selected value in dropdown list using semantic UIReact ES6：使用语义 UI 在下拉列表中获取选定值
【发布时间】：2018-02-15 13:00:04
【问题描述】：

鉴于以下数据，我如何获取鸟类名称并将其（使用添加按钮）推送到新数组以显示在另一个 div 中（使用 react es6）？所以基本上我希望用户从语义下拉列表中单击一只鸟并将其显示在不同的 div 中，例如如下所示。这可能很简单，但是当我使用语义元素时，我似乎找不到解决方法。我需要使用onChange吗？

我需要在我正在导出的类中执行此操作（反应）（只是没有显示类/构造函数/状态定义）

<div>
    <p>How can i display 'Bird_Name' here?<p>
</div>

addClick = () => {
        
}

const {
  Button,
  Container,
  Divider,
  Dropdown,
  Header,
  Message,
  Segment,
} = semanticUIReact

const birds = [
            {
                "value": "001",
                "Bird_Name": "Eurasian Collared-Dove"
            },
            {
                "value": "002",
                "Bird_Name": "Bald Eagle"
            },
            {
                "value": "003",
                "Bird_Name": "Cooper's Hawk"
            },
        ];

const options = birds.map(({ ID, Bird_Name }) => ({ value: ID, text: Bird_Name }))

const App = () => (
  <Container>
    <Divider hidden />
    <Header as='h1'>Semantic-UI-React</Header>
    <Dropdown 
      placeholder='Select...' 
      selection
      search
      options={options}
      renderLabel={({ Bird_Name }) => 1}
      />
      <button className="ui primary button add" onClick={this.addClick}>Add</button>
  </Container>
)

// ----------------------------------------
// Render to DOM
// ----------------------------------------
const mountNode = document.createElement('div')
document.body.appendChild(mountNode)

ReactDOM.render(<App />, mountNode)

【问题讨论】：

你可以使用 Semantic 提供的原生 onChange：react.semantic-ui.com/modules/dropdown 看看它返回了什么
这里是一个例子>=: react.semantic-ui.com/modules/…
补充@Naramsim所说的，您应该使用Select组件中的onChange函数来调用更新状态（在这种情况下可能是本地状态，所以使用setState）。然后当按钮被点击时，您可以获取状态并使用添加按钮将其推送。

标签： javascript reactjs semantic-ui

【解决方案1】：

所以，您基本上想要的是将显示的 onChange 函数。

 <Dropdown 
  placeholder='Select...' 
  selection
  search
  options={options}
  renderLabel={({ Bird_Name }) => 1}
  onChange={this.getBird}
  />

并创建一个 getBird 函数

getBird = (event, {value}) => {
    console.log(value);
    let bird_name = event.target.textContent;
    console.log(bird_name);
}

getBird 函数中的 value 和 text 变量基本上就是从下拉列表中选择的鸟的 value 和 bird_name。

【讨论】：