在 React 中更改 onChange 的道具

Question

我通过语义 UI 使用这个下拉组件，它有一个更新选择值的onChange方法，通常，它的工作原理类似于onChange={this.pickIcon}然后你可以访问该值

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

我这里的情况有点不同我得到了一个带有数组映射的列表，每个列表都有一个下拉列表，我需要每个数组项的值以便我可以保存数据，仅获取选定的图标没有帮助，请有人协助那？

我尝试手动添加道具，但它崩溃了，我无法记录这两个值，因为它会引发此错误

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

无法解构“未定义”的属性“值”，因为它未定义。

这是我的完整代码，可为您提供更好的上下文

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传递给函数

Answer 1

第一个param总是被识别为一个事件e

所以这里的item被识别为一个 item，因此你似乎无法让它工作，因为该函数接受两个参数。

尝试这个

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

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

Answer 2

您的 pickIcon 函数采用两个参数 (e, {value})。 因此，您应该向它传递 2 个参数，或者您应该更改 pickIcon 函数以接受单个参数。

您的 onChange 将为您提供event对象。 因此，如果您对事件对象感兴趣，请像下面这样调用您的 pickIcon -

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

如果您对下面的event对象不感兴趣 -

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

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

Answer 3

请从功能中删除项目

  <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)
  }

Answer 4

我认为错误出在这段代码中

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

当你调用没有参数的函数时，它会自动传递事件 (e) 和值，所以你第一次就做对了

现在你正在传递一个参数，所以你应该只接收一个参数

Answer 5

所有答案都只集中在一个参数上，我需要它们两个，无论如何我想通了

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

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