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