web-dev-qa-db-ja.com

React ES6：セマンティックUIを使用してドロップダウンリストで選択した値を取得します

次のデータを前提として、鳥の名前を取得し、それを（追加ボタンを使用して）別の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)
javascriptreactjssemantic-ui
6
colin_dev256

したがって、基本的に必要なのは、表示される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変数は、基本的に、ドロップダウンから選択した鳥の値とbird_nameです。

9
nishit chittora