javascript - React js添加面板事件问题

Question

我是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

Answer 1

在 React 中，你一般不会直接修改 DOM 元素，而只是以你当前想要的形式渲染它们。每当组件的状态或属性发生变化时，您的 render 函数都会被再次调用。 (此外，在 react 中，您使用 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'));