在下面的代码中,我使用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 data-xx
给定 DOM 元素中的属性。所以<span data-id="1">test</span>
将评估dataset.id
1.渲染dom元素时需要传递data属性才能读取它们。
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" />
关于javascript - 我使用 `e.currentTarget.dataset.id` 来获取单击的 li 的 inex,但给了我 `undefined`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49711130/