如何將標准的“選擇”標簽轉換為反應選擇

Question

我想把它變成一個 from react-select。 傳遞的所有數據都可以完美運行，但是當我將其更改為不起作用時（因為它需要其他選項），我想知道如何使這段代碼與 React-Select 兼容。

<div>
   <select value={this.state.currency} onChange={this.getTest}>
      {this.state.items.map((obj, index) => 
         <option key={${index}-${obj.country}} value={obj}> {obj} </option>
      )} 
   </select>
</div>

Answer 1

無需為您的選擇元素指定“值”。 相反，您需要在 onChange 函數上相應地設置您的狀態。

如果這樣做是為了以某種方式“綁定”選擇選項和狀態，則您可能不會采用反應方式（可能是由於 Angular 背景，這種兩種方式的綁定是要走的路）。

Answer 2

圖書館的好例子

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

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

class App extends React.Component {
  state = {
    selectedOption: null,
  }
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  }
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
      />
    );
  }
}