我使用`e.currentTarget.dataset.id`来获取点击的li的不可思议但是给了我'undefined`
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我使用`e.currentTarget.dataset.id`来获取点击的li的不可思议但是给了我'undefined`相关的知识，希望对你有一定的参考价值。
在下面的代码中，我使用e.currentTarget.dataset.id来获取被点击的li的索引，但它返回undefined，问题是什么？我如何使用e获取索引？
class Answers extends React.Component {
constructor(props) {
super(props);
}
handleCheck(e) {
console.log(e.currentTarget.dataset.id);
}
render() {
return (
<div>
<ul>
<li onClick={this.handleCheck.bind(this)} data-id="1"><span>A</span> <p>{this.props.answers[0]}</p></li>
<li onClick={this.handleCheck.bind(this)} data-id="2"><span>B</span> <p>{this.props.answers[1]}</p></li>
<li onClick={this.handleCheck.bind(this)} data-id="3"><span>C</span> <p>{this.props.answers[2]}</p></li>
<li onClick={this.handleCheck.bind(this)} data-id="4"><span>D</span> <p>{this.props.answers[3]}</p></li>
{this.props.answers[3]}</p></li>
</ul >
</div >
);
}
}
答案
dataset reads给出DOM元素中的data-xx属性。所以<span data-id="1">test</span>会将dataset.id评估为1.你需要在渲染dom元素时传递数据属性，然后你才能阅读它们。
class Answers extends React.Component {
constructor(props) {
super(props);
}
handleCheck(e) {
console.log(e.currentTarget.dataset.id );
}
render() {
const { answers } = this.props;
return (
<div>
<ul>
{answers.map((answer, i) =>
<li onClick={this.handleCheck} data-id={i}>
<span>{String.fromCharCode(65+i)}</span> <p>{answer}</p>
</li>
)}
</ul>
</div>
);
}
}
const answers = ['one', 'two', 'three'];
ReactDOM.render(<Answers answers={answers} />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />以上是关于我使用`e.currentTarget.dataset.id`来获取点击的li的不可思议但是给了我'undefined`的主要内容，如果未能解决你的问题，请参考以下文章
访问我加载的 .pdf 页面（使用 pdfbox）（我正在使用 RPG）
如何使用 AFNetworking 框架与 json 一起使用我自己的 api 登录我有令牌要传递但我现在不知道如何使用这些