Изменение функции handleChange для выпадающего селектора React - PullRequest
Новая
       60

Изменение функции handleChange для выпадающего селектора React

0 голосов
/ 02 мая 2020

Я новичок в реакции, и я хочу создать выпадающий селектор с функцией 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 работает для текстовых полей и входных данных, но не соответствует этой раскрывающейся версии. Как мне реализовать версию, которая соответствует этому раскрывающемуся?

Ответы [ 2 ]

1 голос
/ 02 мая 2020

Выбор дает вам выбранное значение напрямую, а не событие, чтобы вы могли использовать его как есть. Также значение по умолчанию может быть установлено как 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} />
0 голосов
/ 02 мая 2020 
<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.

...