给定以下数据，我如何获取鸟类名称并将其推送(使用添加按钮)到一个新数组以显示在另一个 div 中(使用 react es6)？所以基本上我希望用户从语义下拉列表中单击一只鸟并将其显示在不同的 div 中，例如如下所示。这可能很简单，但是当我使用语义元素时，我似乎找不到解决方法。我需要使用 onChange 吗？
我需要在我正在导出的类中执行此操作( react )(只是没有显示类/构造函数/状态定义)
<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)
最佳答案
所以，您基本上想要的是将显示的 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 函数中的值和文本变量基本上是从下拉列表中选择的鸟的值和 bird_name。
关于javascript - react ES6 : Get selected value in dropdown list using semantic UI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48807924/