我使用 `e.currentTarget.dataset.id` 来获取点击的 li 的索引，但给了我 `undefined`

Question

在下面的代码中，我使用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 >
        );
    }
}

Answer 1

dataset reads 给定 DOM 元素中的 data-xx 属性。所以<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" />