Question

我试图将侧边栏导航组件移动到React.js，并且onclick中的javascript不再起作用。因此，侧边栏显示，但是单击时没有任何反应。

编辑：这是与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（显示渲染的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，并使用了错误的关键字。确保使用onClick={}和className=""的React专用术语。

编辑：而且看来您尝试使用的引用不正确。您完全不需要在这里使用ref，因为onChange函数将在react类中可用。但是，很难在没有所有代码的情况下准确地知道您要做什么。

第二次修改：好的，使用您更新的代码，我可以看到更多错误的信息。您遇到了一些问题，我将尽力解决。

不使用react关键字。像onclick和class之类的东西需要更改为特定于反应的onClick和className才能起作用。
您没有正确使用裁判。在最基本的意义上，引用用于在安装React组件后对其进行修改。我假设您正在尝试在此处调用函数，在这种情况下，由于无法在此处定义该函数，因此只能假设它作为道具传入。如果是这样，则需要使用this.props.blah进行调用。
您对变量的所有分配都在if语句的范围内，因此在该范围之外将无法使用它们。如果需要在代码中使用它们，则必须在if块之前定义变量。

从标准HTML迁移时，React.js中的OnClick

1 个答案: