web-dev-qa-db-ja.com

ReactJSでドロップダウンメニューの選択値を取得する方法

私は反応を使用していて、反応のドロップダウンの選択されたオプションの値を取得したいのですが、方法がわかりません。助言がありますか？ありがとう！私のドロップダウンは次のような選択です。

            <select id = "dropdown">
                <option value="N/A">N/A</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
javascriptselectdrop-down-menumenureactjs
37
BlueElixir

renderメソッドのコードは、常にコンポーネントを表します。 このようなもの を実行すると、ユーザーはフォームコントロールを使用して選択を行えなくなります。

<select value="Radish">
  <option value="Orange">Orange</option>
  <option value="Radish">Radish</option>
  <option value="Cherry">Cherry</option>
</select>

したがって、フォームコントロールを操作するための2つのソリューションがあります。

  1. 制御コンポーネントコンポーネントstateを使用して、ユーザーの選択を反映します。これにより、stateに加えた変更がコンポーネントのレンダリングに反映されるため、ほとんどのコントロールが提供されます。

例：

var FruitSelector = React.createClass({
    getInitialState:function(){
      return {selectValue:'Radish'};
  },
    handleChange:function(e){
    this.setState({selectValue:e.target.value});
  },
  render: function() {
    var message='You selected '+this.state.selectValue;
    return (
      <div>
      <select 
        value={this.state.selectValue} 
        onChange={this.handleChange} 
      >
       <option value="Orange">Orange</option>
        <option value="Radish">Radish</option>
        <option value="Cherry">Cherry</option>
      </select>
      <p>{message}</p>
      </div>        
    );
  }
});

React.render(<FruitSelector name="World" />, document.body);

JSFiddle： http://jsfiddle.net/xe5ypghv/

  1. 非制御コンポーネント他のオプションは、値を制御せず、単にonChangeイベントに応答することです。この場合、defaultValue propを使用して初期値を設定できます。

    <div>
 <select defaultValue={this.state.selectValue} 
 onChange={this.handleChange} 
 >
    <option value="Orange">Orange</option>
    <option value="Radish">Radish</option>
    <option value="Cherry">Cherry</option>
  </select>
  <p>{message}</p>
  </div>

http://jsfiddle.net/kb3gN/10396/

これに関するドキュメントは素晴らしいです： http://facebook.github.io/react/docs/forms.html また、複数の選択項目を操作する方法を示します。

更新

オプション1のバリエーション（制御コンポーネントを使用）は、 Redux および React-Redux を使用して コンテナコンポーネント を作成します。これにはconnectとmapStateToProps関数が関係しますが、これは見た目よりは簡単ですが、始めたばかりの場合はおそらくやりすぎです。

62
Max Heiber

ドロップダウンを次のように実装します

<select id = "dropdown" ref = {(input)=> this.menu = input}>
    <option value="N/A">N/A</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

ここで、ドロップダウンメニューの選択したオプション値を取得するには、次を使用します。

let res = this.menu.value;
14
Shubham Khatri

<select>オブジェクトのonChangeイベントを使用するだけです。選択された値はe.target.valueにあります。

ところで、id="..."を使用するのは悪い習慣です。 ref=">.."を使用することをお勧めします http://facebook.github.io/react/docs/more-about-refs.html

8
Karén

フロントエンド開発者に関しては、多くの場合、ドロップダウンを処理する必要があるフォームを扱っており、選択したドロップダウンの値を使用してアクションを実行したり、サーバーで値を送信したりする必要があります。 HTMLで簡単なドロップダウンを記述するには、ユーザーがドロップダウンの値を変更するたびに選択の1つのonChangeメソッドをドロップダウンに設定するだけで、AvFeaturedPlayList 1で簡単にアクセスできるため、常にオプション値として結果を取得できます。画面に表示されるドロップダウンテキストではありません

import React, { Component } from "react";
import { Server } from "net";

class InlineStyle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectValue: ""
    };

    this.handleDropdownChange = this.handleDropdownChange.bind(this);
  }

  handleDropdownChange(e) {
    this.setState({ selectValue: e.target.value });
  }

  render() {
    return (
      <div>
        <div>
          <div>
            <select id="dropdown" onChange={this.handleDropdownChange}>
              <option value="N/A">N/A</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
            </select>
          </div>

          <div>Selected value is : {this.state.selectValue}</div>
        </div>
      </div>
    );
  }
}
export default InlineStyle;
0
ABHIJEET KHIRE