javascript - 从 React 中的 div 获取 prop 值

Question

可以在以下位置找到我的问题的工作示例:

https://codepen.io/RyanCRickert/pen/vYYQeaW

我正在支持将函数钻入两层并将该函数与索引一起传递给呈现的组件。提交名称时，它会呈现一个新组件，该组件显示名称和具有 onClick (X) 的 div。我正在尝试接收名称在其所在数组中的位置索引，以便在单击按钮时将其拼接出来。

例如，如果我输入名称“Bob”，然后单击带有监听器的 div，我可以控制台记录 event.target。使用上面的例子我得到 "<div class='person-item__X' value='0'>X</div>"对于 event.target 和未定义的 event.target.value。该值被分配为 <div onClick={props.removeName} class="person-item__X" value={props.value}>X</div> .

这样的庄园，难道我就是抢不到一个div的值(value)吗？还是我缺少什么？谢谢

Answer 1

将这些更改为您的代码

const PersonListItem = props => (
  <div class="person-item">
    <div class="person-item__name">{props.name}</div>
    <div onClick={() => props.removeName(props.value)} class="person-item__X" value={props.value}>X</div>
  </div>
);

在 PeopleList 中替换这一行

<PersonListItem key={index} name={person} value={index} removeName={(id) => props.removeName(id)} />

在 TeamGenerator 中替换这一行

<PeopleList people={this.state.names} removeName={(id) => this.handleRemoveName(id)} />

现在在 handleRemoveName 中，您将收到点击 X 的项目的 id

handleRemoveName = id => {
    const currentArr = this.state.names;
    console.log(id);
  }