我的react应用程序中有一个这样的 html 标签
<ul>
<li>
Item 1
<button>
Delete
</button>
</li>
<li>
Item 2
<button>
Delete
</button>
</li>
<li>
Item 3
<button>
Delete
</button>
</li>
</ul>
现在，如果我从我的 li 元素之一中单击“删除”按钮，我想删除该特定的 li。如何仅使用 javascript 将单击的按钮指向该特定 li？
使用Array.map()生成您的项目，并附加一个onClick这样的处理程序：
class Demo extends React.Component {
state = { items: ['Item 1', 'Item 2', 'Item 3'] };
handleDelete = name => {
this.setState(s => ({ items: s.items.filter(x => x !== name) }));
}
render() {
return (
<ul>{this.state.items.map(x =>
<li>{x}
<button onClick={() => this.handleDelete(x)}>Delete</button>
</li>
)}</ul>
);
}
}
ReactDOM.render(<Demo />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>如果您不想为每个项目生成一个删除函数并在单个函数中处理删除，则必须为您的项目添加某种 id 以识别它们。然后，您可以使用数据属性将此 id 附加到按钮，并从event.target处理程序中获取此 id ：
class Demo extends React.Component {
state = {
items: [
{ id: 1, content: 'Item 1' },
{ id: 2, content: 'Item 2' },
{ id: 3, content: 'Item 3' }
]
};
handleDelete = e => {
const id = +e.target.getAttribute('data-id');
this.setState(s => ({ items: s.items.filter(x => x.id !== id) }));
}
render() {
return (
<ul>{this.state.items.map(({ id, content }) =>
<li key={id}>{content}
<button data-id={id} onClick={this.handleDelete}>Delete</button>
</li>
)}</ul>
);
}
}
ReactDOM.render(<Demo />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>您可以根据 li 元素中的 id 为按钮元素赋予 id 属性，并在引用要删除的项目时使用该 id。