React中事件傳參的寫法

最近在嘗試React，發現之前很多用jQuery就能輕鬆解決的事情，現在遇到了新的挑戰。當然這並不表示React不行，而是我還需要更多的研究和探索。React中的點擊事件，想要傳參數給方法，始終不得要領，現在摸索出一套寫法，也許不是很完善，但先記錄下來，以備以後改進

class SchemeSwitcher extends Component {
    constructor(props){
        super(props);

        this.handleClick = this.handleClick.bind(this);

    };

    handleClick(event) {
        console.log(event.target.dataset.index);
    }

    render() {

        const listShows = appInfo.threeSchemeNameList.map((nameStr, index) => {
            let classStr = (index === this.props.schemeIndex) ? 'selected' : '';

            return (
                <li className={classStr} key={index} data-index={index} onClick={this.handleClick}>{nameStr}</li>
            )

        });

        return (
            <ul className="switcher">
                {listShows}
            </ul>

        );
    };

}

其中：

<li className={classStr} key={index} data-index={index} onClick={this.handleClick}>{nameStr}</li>

雖然key是React必須傳的，但在組件中卻不能獲取；
想通過onClick={this.handleClick(index)}這樣的方式來直接傳參數，但試過了，不行，函數在渲染時就被執行了；
最後想到了用data-，可以了，不過寫法跟$(this).data(‘index’)不一樣哦。其實頁可以用jQuery，但既然是想嘗試新的東西，還是揚棄過去，使用js的原生寫法吧：event.target.dataset.index。