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

Question

我是react新手，想设计一个带有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。

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

Modifying handleChange function for a drop down selector React

javascript

reactjs

react-props