將Click事件添加到React.Js

Question

我正在學習React.Js。 我正在嘗試附加一個事件來在控制台中寫一些東西，但是我不能讓我的函數觸發。 有誰知道我如何將onClick事件附加到反應div？ 如果這是一個基本問題，我道歉，但我嘗試了幾種不同的方法，但沒有一種方法有效。

我嘗試了兩種觸發下面所示功能的方法，但兩種方法都沒有效果。

所以，我意識到事件不起作用的原因是因為我在渲染服務器端。 如果我在客戶端上呈現，則事件觸發。 有沒有人知道如果我最初在服務器上呈現它會如何觸發？

class Individual extends React.Component {
    handleClick = () => {
        alert("GREAT");
    }
    render() {
        const indDiv = {
            margin: '5px',
            width: '100px',
            height: '120px',
            cursor: 'pointer',
            border: '5px solid pink',
            color: 'blue',
            float: 'left'
        };

        return (
            <div>
                <div onClick={this.handleClick.bind(this)}>
                    Alert 1
                </div>
                <div onClick={() => this.handleClick}>
                    Alert 2
                </div>
                <div style={indDiv}>
                    {this.props.num}. {this.props.name}.
                </div>
            </div>
        );
    }
}

感謝所有為此做出貢獻的人。 在我發現所有內容之后，因為我最初將其創建為服務器渲染的片段，所以我必須在頁面渲染后附加事件。 我使用ReactJS.Net並且必須使用水合物單獨初始化它。

Answer 1

在代碼中調用處理函數的方式都不正確。

在您的代碼中，handleClick是一個箭頭函數，因此不需要手動綁定。

如果它不是箭頭函數，那么手動綁定應始終僅在構造函數中完成。 永遠不要像在渲染中那樣在其他地方進行綁定。

當你使用onClick = {（）=> this.handleClick}這是錯誤的。 它應該是onClick = {（）=> this.handleClick（）}。 如果沒有Paranthesis那么這是正確的onClick = {this.handleClick}

所以改變

    <div onClick={this.handleClick.bind(this)}>
                Alert 1
            </div>
            <div onClick={() => this.handleClick}>
                Alert 2
            </div>

至

    <div onClick={()=> this.handleClick()}>
                Alert 1
            </div>
            <div onClick={() => this.handleClick()}>
                Alert 2
            </div>

之所以你不應該在組件中的任何其他地方進行綁定，除了構造函數，因為例如你在渲染中直接綁定，所以在這種情況下會發生的事情是它在每次組件呈現時再在webpack包文件中創建一個新函數，然后再重新渲染文件變大了。 因此，建議僅在構造函數中綁定它

Answer 2

您需要在render方法之后聲明handler方法。 這是jsfiddle中代碼的基本實現。

https://jsfiddle.net/ufyxwv8p/

class Individual extends React.Component {
    render() {
        const indDiv = {
            margin: '5px',
            width: '100px',
            height: '120px',
            cursor: 'pointer',
            border: '5px solid pink',
            color: 'blue',
            float: 'left'
        };

        return (
            <div>
                <div onClick={this.handleClick}>
                    Click to show in console
                </div>
                <div style={indDiv}>
                    {this.props.num}. {this.props.name}.
                </div>
            </div>
        );
    }
    handleClick = () => {
        console.log('this is:', this);
    }
}

ReactDOM.render(<Individual/>,document.getElementById("app"))

Answer 3

你必須使用bind

onClick={this.handleClick.bind(this)}

或使用箭頭功能

onClick={()=>this.handleClick()}

Answer 4

Alert 1上的單擊處理程序已在運行。 使用() => {}類屬性語法時，不必bind 。

Alert 2上的單擊處理程序無法正常工作，因為您已編寫了一個返回另一個函數的內聯箭頭函數。 你需要調用它，比如() => this.handleClick() 。

這是代碼的工作片段。

 class Individual extends React.Component { handleClick = () => { alert("GREAT"); }; render() { const indDiv = { margin: "5px", width: "100px", height: "120px", cursor: "pointer", border: "5px solid pink", color: "blue", float: "left" }; return ( <div> <div onClick={this.handleClick}>Alert 1</div> <div onClick={() => this.handleClick()}>Alert 2</div> <div style={indDiv}> {this.props.num}. {this.props.name}. </div> </div> ); } } ReactDOM.render(<Individual />, document.getElementById("app")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div> 

Answer 5

在這里嘗試這樣你定義你的handleclick功能是錯誤的我已經在沙盒上在線編輯你的代碼，使其工作。 調用函數的方式與調用Alert 1的方式相比，我按照上傳圖像的方式定義函數

代碼的代碼框鏈接檢查

如果您沒有時間瀏覽整個代碼，請檢查該代碼的圖像

Answer 6

class Individual extends React.Component {
  handleClick = () => {
    alert("GREAT");
  };
  render() {
    const indDiv = {
      margin: "5px",
      width: "100px",
      height: "120px",
      cursor: "pointer",
      border: "5px solid pink",
      color: "blue",
      float: "left"
    };

    return (
      <div>
        <div onClick={this.handleClick}>Alert 1</div>
        <div onClick={this.handleClick}>Alert 2</div>
        <div style={indDiv}>
          {this.props.num}. {this.props.name}.
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Individual />, document.getElementById("app"));