web-dev-qa-db-ja.com

マルチドロップダウンを使用するときに選択オプションの反応選択を取得する

私のページには2つの react-select ドロップダウンがあります。1つはユーザーがAまたはBを選択できるようにするドロップダウンで、もう1つは「青、黄色、赤」から複数のアイテムを選択できるようにします。

これらのアイテムを選んだら、使いたいです。とりあえず、選択した値を確認したいだけなので、画面に出力するだけです。単一選択ドロップダウンでは、githubのサンプルコードを正常に使用しました。これは次のとおりです。

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'a', label: 'a' },
  { value: 'b', label: 'b' },
];

class App extends React.Component {
  state = {
    selectedOption: null,
  }
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    document.write(`Option selected:`, selectedOption.value); //this prints the selected option
  }
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
        //isMulti //added when the user can pick more than one
      />
    );
  }
}

私の質問は、マルチオプションでこれをうまく行うにはどうすればよいですか？ユーザーは必要な数だけ選択できますが、選択されたオプションを印刷すると「未定義」エラーがスローされます。これは、オプションが配列に格納されているためだと思いますが、よくわかりません。

皆さんありがとう。

javascriptreactjsreact-select
3
Uciebila

handleChangeを処理するには、isMultiを変更する必要があります。次に例を示します。

import React, { Component } from 'react';
import { render } from 'react-dom';
import Select from 'react-select';

const options = [
  { value: 'a', label: 'a' },
  { value: 'b', label: 'b' },
];

class App extends React.Component {
  state = {
    selectedOptions: [],
  }

  handleChange = (selectedOptions) => {
    this.setState({ selectedOptions });
  }

  render() {
    const { selectedOption } = this.state;

    return (
      <React.Fragment>
        <Select
          isMulti
          value={selectedOption}
          onChange={this.handleChange}
          options={options}
        />
      {this.state.selectedOptions.map(o => <p>{o.value}</p>)}
      </React.Fragment>
    );
  }
}

render(<App />, document.getElementById('root'));

これが実際の例です： https://stackblitz.com/edit/react-czf4ib

6
Colin Ricardo

反応フックを使用している場合、isMultiプロパティを使用してreact-selectから選択した値を取得する方法は次のとおりです。

import React, {useState} from 'react';
import Select from 'react-select';
import { useForm } from 'react-hook-form';
import { handleSubmit } = useForm();

const options = [
  { value: 'a', label: 'a' },
  { value: 'b', label: 'b' },
];

const FormComponent = (props) => {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const handleChange = (options) => {
    setSelectedOptions(options);
  };

  const onSubmit = (formData, event) => {
     console.log("Form Data: ", formData)
     console.log("Selected Options: ", selectedOptions)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select
          isMulti = {true}
          options={options}
          closeMenuOnSelect={false}
          onChange={handleChange}/>

     <button type="submit">Save</button>
    </form>
  );
}

それが役に立てば幸い！

1
bmnepali