修改下拉选择器React的handleChange函数

Question

我刚开始反应，我想设计一个下拉选择器，它有一个handleChange函数供以后使用。

const Countries = [
{ label: "Albania", value: 355 },
{ label: "Argentina", value: 54 },
{ label: "Austria", value: 43 },
{ label: "Cocos Islands", value: 61 },
{ label: "Kuwait", value: 965 },
{ label: "Sweden", value: 46 },
{ label: "Venezuela", value: 58 }
];
handleChange = input => e => {
this.setState({ [input]: e.target.value }); 
}
<Select placeholder='Select Location'onChange={handleChange('Location')} defaultValue={values.Location} required options={Countries} />

这个handleChange函数适用于文本字段和输入，但它与这个下拉版本不匹配。我应该如何实现与此下拉列表匹配的版本？

Answer 1

Select直接为您提供所选值，而不是事件，因此您可以按原样使用它。此外，默认值可以设置为Countries[0]

const Countries = [
{ label: "Albania", value: 355 },
{ label: "Argentina", value: 54 },
{ label: "Austria", value: 43 },
{ label: "Cocos Islands", value: 61 },
{ label: "Kuwait", value: 965 },
{ label: "Sweden", value: 46 },
{ label: "Venezuela", value: 58 }
];
handleChange = input => value => {
this.setState({ [input]: value }); 
}
<Select placeholder='Select Location'onChange={handleChange('Location')} defaultValue={values.Location} required options={Countries} />

Answer 2

<Select placeholder='Select Location' onChange={(data) => handleChange(data)} defaultValue={values.Location} required options={Countries} />

您需要传递一个类似onChange={(data) => handleChange(data)}的函数，以便它能够在onChange上实际执行。

在功能内部

handleChange = input => {
this.setState({ selectedValue: e.target.value }); 
}

它会设置整个对象，而使用它可以取出selectedValue.value。