React js 添加面板事件问题答案

【问题标题】：React js to add panel event issueReact js 添加面板事件问题
【发布时间】：2019-06-21 05:21:57
【问题描述】：

我是 reactjs 的初学者，我为我的 react 项目添加了一些面板，我在那个按钮事件上遇到了一些冲突，当点击按钮面板没有打开时，任何人都知道如何正确添加这个

这是我的代码。 index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
       <div id="mySidepanel" class="sidepanel">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
      <button class="openbtn" onclick="openNav()">☰ Toggle Sidepanel</button>
     </div>

    );
  }
}

render(<App />, document.getElementById('root'));

hello.js

import React from 'react';

export default ({ name }) => <h1>Hello {name}!</h1>;
function openNav() {
  document.getElementById("mySidepanel").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidepanel").style.width = "0";
}

stack blitz here

【问题讨论】：

你可以试试this
@PRK 感谢您的指导，请保留帖子答案部分，我可以投票

标签： javascript reactjs

【解决方案1】：

在 react 中，您通常不会直接修改 DOM 元素，而只是将它们呈现为您当前想要的形式。每当组件的状态或属性发生变化时，您的 render 函数都会再次调用。（另外在反应中你使用className=而不是class=，和onClick={function}而不是onclick="code"）。

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      sidepanelOpen: false,
    };
  }

  render() {
    return (
      <div>
       <div id="mySidepanel" className="sidepanel" style={{width: this.state.sidepanelOpen ? '250px' : '0px'}}>
        <a href="javascript:void(0)" className="closebtn" onClick={() => this.setState({sidepanelOpen: false })}>×</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
      <button className="openbtn" onClick={() => this.setState({sidepanelOpen: true})}>☰ Toggle Sidepanel</button>
     </div>

    );
  }
}

render(<App />, document.getElementById('root'));

【讨论】：

先生，感谢您的宝贵指导

【解决方案2】：

使用 React 元素处理事件与处理 DOM 元素的事件非常相似。有一些语法差异：例如，在 HTML 中：

<button onclick="activateLasers()">
  Button
</button>

反应：

<button onClick={activateLasers}>
  Activate Lasers
</button>

在你的情况下：用于打开侧面板

 <button class="openbtn" onClick={this.openNav}>☰ Toggle Sidepanel</button>

用于关闭侧面板

    <a href="javascript:void(0)" class="closebtn" onClick={this.closeNav}>×</a>

并将函数放在同一个组件中

最终代码如下所示：

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }
  openNav = () => {
    document.getElementById("mySidepanel").style.width = "250px";
  }
 closeNav = () => {
  document.getElementById("mySidepanel").style.width = "0";
}
  render() {
    return (
      <div>
       <div id="mySidepanel" class="sidepanel">
        <a href="javascript:void(0)" class="closebtn" onClick={this.closeNav}>×</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
      <button class="openbtn" onClick={this.openNav}>☰ Toggle Sidepanel</button>
     </div>
    );
  }
}

【讨论】：