如何從 react-select 下拉列表中看不到 select 值和選項（標簽名稱）？

Question

我是 React 的新手。 我正在使用react-select並且我使用了以下代碼。 顯示下拉列表，但我無法看到名稱，選擇后也無法查看。

<Select
  variant="outlined"
  margin="normal"
  fullWidth
  value={this.state.selected}
  options={RewardAutomationsList}
  name="selected"
  onChange={this.handleChange}
  placeholder='None'
>
  {RewardAutomationsList.map((option) => (
    <option key={option.id} value ={option.name} label={option.name}>
      {option.name}
    </option>
  ))}
</Select>

handleChange = event => {
  this.setState({
    selected: event.name
  });
};

RewardAutomationsList如下所示：

RewardAutomationsList:
  0:{name: "TEST 1 (INR 100)", id: "123"}
  1:{name: "test 2 (INR 250)", id: "456"}

有人可以幫忙嗎？

Answer 1

同樣的 npm package 使用這樣的塊代碼。

 import React, { Component } from 'react'
    import Select from 'react-select'
    
    const options = [
      { value: 'chocolate', label: 'Chocolate' },
      { value: 'strawberry', label: 'Strawberry' },
      { value: 'vanilla', label: 'Vanilla' }
    ]
    
    const MyComponent = () => (
      <Select options={options} />
    )

Answer 2

react-select接受具有label和value鍵的對象數組。 您在RewardAutomationsList中的選項對象具有id和name鍵，因此無法顯示。 你需要改變它們。

此外，當您使用react-select的onChange屬性訂閱更改事件時，您提供的回調 function 會收到selectedOption ，而不是event 。

以下應該有效：

const RewardAutomationsList = [
  { label: "TEST 1 (INR 100)", value: "123" },
  { label: "test 2 (INR 250)", value: "456" },
];

class App extends React.Component {
  state = {
    selected: null,
  }

  handleChange = (selectedOption) => {
    this.setState({
      selected: selectedOption,
    });
  };

  render() {
    return (
      <React.Fragment>
        <Select
          fullWidth
          margin="normal"
          name="selected"
          onChange={this.handleChange}
          options={RewardAutomationsList}
          placeholder="None"
          value={this.state.selected}
          variant="outlined"
        />
        {/* It's not necessary and it's only here to show the current state */}
        <pre>{JSON.stringify(this.state, null, 2)}</pre>
      </React.Fragment>
    );
  }
}