web-dev-qa-db-ja.com

React-selectは、選択した値をフィールドに表示しません

私は次のように定義するreact-selectコンポーネントを持っています：

<Select
            id="portf"
            options={opts}
            onChange={value => portfolioSelector(value)}
            placeholder="Select Portfolio"
          />

opts = [{label: any, value:1}, {label:Two, value:2}]。

選択した値は、portfolioSelector関数を介して状態で保存されます。問題は、値を選択したときに、選択フィールドに表示されなかったことです。私の主なコンポーネントはこれです：

const PortfolioSelector = ({
  opts,
  portfolioSelector
}) => {
  if (opts) {
    return (
      <div className="portfolio select-box">
        <label htmlFor="selectBox" className="select-box__label">
        Portfolio
        </label>
        <div className="select-box__container">
          <Select
            id="portf"
            options={opts}
            onChange={value => portfolioSelector(value)}
            placeholder="Select Portfolio"
          />
        </div>
        <div className="separator" />
      </div>
    );
  }
  return (
    <div>Loading</div>
  );
};

なぜなのかご存知ですか？

javascriptreactjsonchangereact-select
6
user7334203

まず、label：anyまたはTwoが文字列の場合、間違った配列が作成されます。二重引用符を追加する必要があります。これを見てください：

opts = [{label: "any", value:1}, {label:"Two", value:2}]

次に、この場合のオプションは、optsがラベルと値を持つオブジェクトの配列であり、状態に追加するデータは何かということを覚えておく必要があります。

      <Select
        id="portf"
        options={opts}
        onChange={value => portfolioSelector(value.value /* or if you want to add label*/ value.label)}
        placeholder="Select Portfolio"
      />
3
Rahmat Aligos

修正しました。 付加価値プロパティを忘れました。これを使用して、作業コードを確認してください。

const opts = [{ label: 'any', value: 1 }, { label: 'Two', value: 2 }];

const PortfolioSelector = ({ options }) => {
  if (options) {
    return (
      <div className="portfolio select-box">
        <label htmlFor="selectBox" className="select-box__label">
          Portfolio
        </label>
        <div className="select-box__container">
          <Select
            id="portf"
            options={options}
            value={this.state.opts1}
            onChange={value => this.setState({ opts1: value })}
            placeholder="Select Portfolio" />
        </div>
        <div className="separator" />
      </div>
    );
  }
  return <div>Loading</div>;
};

コンポーネントを呼び出します

<PortfolioSelector options={opts} />
0
Özberk Çetin