渲染組件時運行onClick函數

Question

在渲染組件時運行的onCLick處理程序，代碼中是否有任何錯誤？

class MappedEmoji extends React.Component{
    render(){
        const data = this.props.emoji.map(emoji => {
            return(
                <span onClick={this.props.handleClick(emoji)}  className="myEmoji">{emoji}</span>
            )
            });

        return(
            <div> {data}</div>
        )
    }

}
class StickersComponent extends React.Component{
    constructor(props){
        super(props);
        this.state={
            Emoji:["😀","😁","😂","🤣","😃","😄","😅","😆","😊","😋","😎","😍","😘","🥰","😗"],
        };
       this.handleClick = this.handleClick.bind(this);
    }
    handleClick(emoji){
        console.log(emoji);
    }
    render(){       
        return(
            <div className="stickers555">
                <div className="_emoji">
                {
                        <MappedEmoji emoji={this.state.Emoji}
                        handleClick = {this.handleClick}/>
                }
                </div>
            </div>

        )
    }
}
  ReactDOM.render(<StickersComponent />, document.getElementById('App'))

上面的代碼完美地呈現了所有Emoji表情，但是當onclick處理程序綁定到onClick函數時，它沒有綁定或可能有其他問題。 由於單擊處理程序是bind，渲染時我將在控制台中獲取所有表情符號。

Answer 1

嘗試作為回調進行調用。

<span onClick={() => this.props.handleClick(emoji)}  className="myEmoji">

---

如果必須將參數傳遞給函數，並且不想立即調用它，則需要使用回調。

   onClick={ () => yourFunction(argument1) }