如何捕获模式打开以编辑项目的 ID 值

Question

我正在尝试从模式打开onClick((中获取"id"的值。我已经分配了value={this.props.sightings.id但没有出现在event.target.value.

我尝试使用调试器查找该值，我可以以以下格式查看它，但不知道如何访问它。

这是语义 UI-模态组件功能：

<Modal
  trigger={
    <Icon
      name="camera retro"
      value={this.props.sighting.id}
      size="big"
      value={this.props.sighting.id}
      style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
      onClick={this.handleOpen}
    />
  }
  open={this.state.modalOpen}
  onClose={this.handleClose}
  basic
  size="small"
>

这是点击处理程序：

handleOpen = (e) => {
  console.log(e)
  this.setState({ modalOpen: true, })
}

这是控制台中的结果：

<i
  value="7"
  aria-hidden="true"
  class="camera retro big icon"
  style="flex: 1 1 0%; justify-content: center; align-items: center;"
/>

我想从<i value="7"或可能获得价值另一种方式？

Answer 1

你能试试这个吗？

<Modal
  trigger={
    <Icon
      name="camera retro"
      value={this.props.sighting.id}
      size="big"
      value={this.props.sighting.id}
      style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
      onClick={() => this.handleOpen(this.props.sighting.id)}
    />
  }
  open={this.state.modalOpen}
  onClose={this.handleClose}
  basic
  size="small"
>
handleOpen = (yourID) => {
  console.log(yourID)
  this.setState({ modalOpen: true, })
}

只需将其传递给函数，如果我了解了您的问题...

编辑

如果您需要使用状态而不是 props，则可以复制构造函数中的值，例如：

constructor(props){
 super(props)
 this.state = { myID : this.props.sighting.id}
}

而不是使用this.state.myID而不是this.props.sighting.id