从标准超文本标记语言迁移时React.js中的OnClick

Question

我试图将一个侧边栏导航组件移动到React.js，但onclick中的javascript不再工作。所以侧边栏显示出来了，但是当它被点击的时候什么也没有发生。

Edit:下面的代码可以很好地与HTML配合使用：

<div id="sidebar">
        <div class="toggle-btn" onclick="document.getElementById('sidebar').classList.toggle('active');">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <ul>
            <a href="index.html" class="animsition-link">
                <li>Home</li>
            </a>

            <a href="about.html" class="animsition-link">
                <li>About</li>
            </a>

            <a href="resume.html" class="animsition-link">
                <li>Resume</li>
            </a>

            <a href="projects.html" class="animsition-link">
                <li>Projects</li>
            </a>
        </ul>

    </div>

编辑: React Snippit (显示render的react代码的一部分)

import React, { Component } from 'react';

class Header extends Component {
render() {

if(this.props.data){
  var name = this.props.data.name;
  var occupation= this.props.data.occupation;
  var description= this.props.data.description;
  var city= this.props.data.address.city;
  var networks= this.props.data.social.map(function(network){
    return <li key={network.name}><a href={network.url}><i className={network.className}></i></a></li>
  })
}

return (
  <header id="home">




  <nav id="nav-wrap">
  <div id="sidebar" ref="sidebar">
    <div class="toggle-btn" onChange={this.refs.state.active}>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <ul>
      <a href="index.html" class="animsition-link">
        <li>Home</li>
      </a>

      <a href="about.html" class="animsition-link">
        <li>About</li>
      </a>

      <a href="resume.html" class="animsition-link">
        <li>Resume</li>
      </a>

      <a href="projects.html" class="animsition-link">
        <li>Projects</li>
      </a>
    </ul>

  </div>

Answer 1

您传递的是字符串而不是JavaScript，并且使用了错误的关键字。确保使用react特定的术语onClick={}和className=""。

编辑:另外，看起来你试图错误地使用ref。这里根本不需要使用ref，因为onChange函数在react类中是可用的。但是，如果没有所有的代码，很难确切地说出您想要做什么。

第二次编辑:好的，有了更新后的代码，我可以看到更多的错误。这里有几个问题，我将尝试涵盖所有这些问题。

1. 未使用react关键字。像onclick和class这样的东西需要更改为react特定的onClick和className才能工作。
2. 你没有正确使用ref。在最基本的意义上，Refs用于在装载react组件后对其进行修改。我假设你试图在这里调用一个函数，在这种情况下，由于我看不到它在这里的定义，我只能假设它是作为一个prop传入的。如果这是真的，你需要使用this.props.blah.
3. All调用它，你对变量的赋值在If语句的作用域内，所以它们在该作用域之外是不可用的。如果您需要在代码中使用它们，则必须在If块之前定义变量。