在React中選擇並添加事件偵聽器

Question

將此JS轉換爲React友好的最佳方式是什麼？我正在創建我的第一個React項目，這讓我很難過。

感謝

document.querySelector('.nav').addEventListener('click', e => { 
e.target.classList.toggle('visible'); 
}); 

Answer 1

退房一個互動的this example陣營的組成部分。

您會構建一個跟蹤狀態（即是否爲visible）的組件，並處理輸入以更新該狀態。

class Square extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     value: null, 
    }; 
    } 

    render() { 
    return (
     <button className="square" onClick={() => this.setState({value: 'X'})}> 
     {this.state.value} 
     </button> 
    ); 
    } 
}