reactjs 如何将标准的“select”标记转换为react-select

dffbzjpn  于 2023-02-15  发布在  React
关注(0)|答案(2)|浏览(182)

我想把它转换成一个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>
sr4lhrrt

sr4lhrrt1#

不需要为select元素指定“value”,而是需要在onChange函数中相应地设置状态。
如果这样做是为了以某种方式“绑定”选择选项和状态,那么您可能不会采用react方式(可能是由于Angular背景,在这种背景下,双向绑定是可行的)。

rvpgvaaj

rvpgvaaj2#

图书馆的好例子

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}
      />
    );
  }
}

相关问题