在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> 
    ); 
    } 
}