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

在反应中，通常不直接修改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'));

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

React js添加面板事件问题

2 个答案: