我想把它变成一个来自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>
无需为select元素指定“value”。而是需要在onChange函数上相应地设置状态。
如果这是以某种方式“绑定”选择选项和状态,你可能不会采取反应方式(可能是由于Angular背景,这种双向绑定是要走的路)。
来自图书馆的好例子
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}
/>
);
}
}