web-dev-qa-db-ja.com

ReactJSで複数の選択フォームを処理する方法

ReactJSで複数のフォーム選択オプションを処理しようとします。私はそれを処理するためにjavascriptの古典的なコードに触発されようとしましたが、失敗します。

私のコードは、選択された値を送信しません。それをどのように処理しますか？

ここに私のコード：

  class ChooseYourCharacter extends React.Component {

      constructor(props) {
        super(props);
        this.state = {value: 'coconut'};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        this.setState({value: event.option});
      }

      handleSubmit(event) {
        alert('Your favorite flavor is: ' + this.state.value);
        event.preventDefault();
      }

      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              Pick your favorite La Croix flavor:
              <select multiple={true} value={this.state.value} onChange={this.handleChange}>
                <option value="grapefruit">Grapefruit</option>
                <option value="Lime">Lime</option>
                <option value="coconut">Coconut</option>
                <option value="mango">Mango</option>
              </select>
            </label>
            <input type="submit" value="Submit" />
          </form>
        );
      }
    }
    ReactDOM.render(
             <ChooseYourCharacter/>,
             document.getElementById('root')
    )
javascriptformsreactjsselect
5
HoCo_

私の基本的な理解では、reactJSでSelectフォーム要素を処理しようとすると、HTMLOptionsCollectionにオブジェクトが生成されます。

このオブジェクトのメソッドとプロパティの基本的なルートはe.target.optionsです。

アイテムはe.target.options.valueプロパティに保存されます。

Options.valueオブジェクトに格納されている値にアクセスするには、[i]ループ値、つまりe.target.options [i] .valueプロパティを使用できます。

E.target.options [i] .valueは文字列データ型を返します。

私が今言ったことに続いて、私はオブジェクトが次のように増加する規則に従って保存されていると仮定します：

e.target.options [i] .value where {[i]：value、[i +1]：value（...）} ...

E.target.options [i] .selectedを使用すると、特定の場所に値が格納されているかどうかを制御できます。

e.target.options [i] .selectedは、コードフローの処理に役立つブール値を返します。

それはあなた次第です。

ここで、JavaScriptコードを使用してJSXで複数の選択フォームを処理するための私のコード：

// Create the React Component


    class ChooseYourCharacter extends React.Component {

          // Set the constructor
          constructor(props) {
            super(props);
            this.state = {value: 'coconut'};

            // bind the functions
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
          }

            // extract the value to fluently setState the DOM
            handleChange (e) {

          var options = e.target.options;
          var value = [];
                  for (var i = 0, l = options.length; i < l; i++) {
                    if (options[i].selected) {
                      value.Push(options[i].value);
                    }
                  }
            this.setState({value: value});
        }

          // display in client-side the values choosen
          handleSubmit() {
             alert("you have choose :" + this.state.value);

         }


    (...)
3
HoCo_

複数選択を使用しているので、状態変数を配列として宣言する必要があります

  constructor(props) {
    super(props);
    this.state = {value: []};//This should be an array

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

複数選択コントロールを備えたreactjsフォーム投稿用のブログを作成しました。詳細については、こちらをご覧ください https://handyopinion.com/git-commands-cheat-sheet/

0
Ahmed Bilal

現在Reactを学習しており、 reactjs.orgサイト で同じコードに気づきました。以下は、選択した複数のオプションを処理するための私のソリューションです。

  1. コンストラクターで、状態の 'value'の初期値に配列を使用します
  2. handleChangeメソッドで、Array.from（）を使用してイベントターゲットのselectedOptions（HTMLOptionsCollection-array-like）を配列に変換し、マッピング関数を使用して各項目から値を取得します
class ChooseYourCharacter extends React.Component {

      constructor(props) {
        super(props);
        //this.state = {value: 'coconut'};
        this.state = {value: ['coconut']};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        //this.setState({value: event.option});
        this.setState({value: Array.from(event.target.selectedOptions, (item) => item.value)});
      }

      handleSubmit(event) {
        alert('Your favorite flavor is: ' + this.state.value);
        event.preventDefault();
      }

      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              Pick your favorite La Croix flavor:
              <select multiple={true} value={this.state.value} onChange={this.handleChange}>
                <option value="grapefruit">Grapefruit</option>
                <option value="Lime">Lime</option>
                <option value="coconut">Coconut</option>
                <option value="mango">Mango</option>
              </select>
            </label>
            <input type="submit" value="Submit" />
          </form>
        );
      }
    }
    ReactDOM.render(
             <ChooseYourCharacter/>,
             document.getElementById('root')
    )
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
0
Rick S.