Изменение реквизита onChange в React - PullRequest
Новая
       6

Изменение реквизита onChange в React

0 голосов
/ 05 марта 2020

Я использую этот выпадающий компонент от Semanti c UI, у него есть метод onChange, который обновляет значение выбора, обычно он работает как onChange={this.pickIcon}, а затем вы можете получить доступ к значению 

pickIcon = (e, { value}) => {
  console.log(value)
  // console.log(item)
}

Моя ситуация здесь несколько иная. Я получил список с картой массива, каждый с одним выпадающим списком, мне нужно значение каждого элемента массива, чтобы я мог сохранить данные, получение только выбранного значка не помогает, могу пожалуйста, кто-нибудь помочь с этим?

Я попытался добавить реквизит вручную, но он занял sh, и я не могу зарегистрировать оба значения, так как он выдает эту ошибку 

onChange={(item) => this.pickIcon(item)}

Невозможно деструктурировать свойство 'value' из 'undefined 'как это не определено.

Это мой полный код, чтобы дать вам лучший контекст 

const menuIcons = this.state.screens.map((item, index) => (
  <Grid.Row key={index}>
    <Grid.Column width="6">{item.name}</Grid.Column>
    <Grid.Column width="10">
      <h4>{selectedIcon}</h4>
      <Dropdown
        fluid
        onChange={item => this.pickIcon(item)}
        options={iconsList}
        placeholder="Pick Icon"
        selection
        search
        value={selectedIcon}
      />
    </Grid.Column>
  </Grid.Row>
));

Моя цель - передать либо item, либо index функция

Ответы [ 5 ]

1 голос
/ 05 марта 2020

Ваша функция pickIcon принимает два параметра (e, {значение}). Таким образом, вы должны передать ему 2 аргумента или вам следует изменить функцию pickIcon, чтобы она принимала один аргумент.

Ваш onChange даст вам event объект. поэтому вызывайте свой pickIcon, как показано ниже, при условии, что вы заинтересованы в объекте события - 

onChange={(event) => this.pickIcon(event, item)}

Если вас не интересует использование объекта event ниже - 

onChange={() => this.pickIcon(item)}

pickIcon = (item) => {
  console.log(item)
}
1 голос
/ 05 марта 2020

Первый param всегда распознается как событие e

Так что здесь item распознается как элемент, и, следовательно, вы не можете заставить его работать, так как функция принимает два параметра.

Попробуйте это 

pickIcon = (e, value) => {
    console.log(e)
    console.log(value)
  }

onChange={(e) => this.pickIcon(e,item)}
0 голосов
/ 05 марта 2020

Все ответы сосредоточены только на одном параметре. Мне нужны оба, в любом случае, я понял это 

  onChange={(e, value) => this.pickIcon(item, e, value)}

  pickIcon = (item, e, value) => {
        console.log(item)
        console.log(value)
      }
0 голосов
/ 05 марта 2020

Я думаю, что ошибка в этом коде 

 pickIcon = (itemdata) => {
    console.log(itemdata)
    // console.log(item)
  }

, когда вы вызываете функцию без параметра, она автоматически передает событие (e) и значение, чтобы вы правильно поняли в первый раз

Теперь вы передаете один параметр, поэтому вы должны получать только с одним параметром

0 голосов
/ 05 марта 2020

Пожалуйста, удалите элемент из функции 

  <Dropdown
    fluid
    onChange={() => this.pickIcon(item)} // Here remove item and pass from map
    options={iconsList}
    placeholder='Pick Icon'
    selection
    search
    value={selectedIcon}
  />

Также вы передаете только элемент, пожалуйста, удалите событие 

  pickIcon = ({ value }) => { // Remove e
    console.log(value)
    // console.log(item)
  }
...