Question

我有新的反应。试图弄清楚如何绑定click事件并使其在两个地方切换一个类。我如何实现这一目标？

这是我到目前为止所做的。

导航：

double gradePer = sum / test.Length
string gradeLetter = "F";

if (gradePer >= 60 && gradePer < 70) {
     gradeLetter = "D";
} else if (gradePer >= 70 && gradePer < 80) {
     gradeLetter = "C";
} // you fill in the rest

Console.WriteLine("\nThis is your average = " + gradePer);
Console.WriteLine("\nYour grade is: " + gradeLetter);

侧边菜单/标题：

import React from 'react';
import { css } from 'glamor';
import { container } from '../contents/grid'

export default class Navigation extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isToggled: true };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isToggled: !prevState.isToggled
        }));
    }

    showHeader() {
        this.refs.navigation.show();
    }

    render() {
        return (
            <nav className={nav} {...container}>
                <ul {...hamburger} className={this.state.isToggled ? "" : "active"} onClick={this.handleClick}>
                    <li>
                    </li>
                </ul>
            </nav>
        )
    }
}

我只渲染每个组件的应用程序：

import React from 'react';
import { Link } from 'react-router-dom';
import { css } from 'glamor';
import { header, nav, navUL } from '../contents/navigation';

export default class Header extends React.Component {
    constructor(props) {
        super(props);
    }

    show() {
        this.setState({
            isToggled: true
        });
    }

    render() {
        return (
            <header {...header}>
                <nav {...nav}>
                    <ul {...navUL} className={styleUl}>
                        <li>
                            <Link to='/'>Robin Savemark</Link>
                        </li>
                        <li>
                            <Link to='/experience'>Erfarenhet</Link>
                        </li>
                        <li>
                            <Link to='/education'>Utbildning</Link>
                        </li>
                        <li>
                            <Link to='/project'>Projekt</Link>
                        </li>
                        <li>
                            <Link to='/knowledge'>Kunskaper</Link>
                        </li>
                        <li>
                            <Link to='/contact'>Kontakt</Link>
                        </li>
                    </ul>
                </nav>
            </header>
        )
    }
}

如何告诉我的“handleClick”方法“切换”汉堡包菜单和标题/侧边菜单？因为handleClick在另一个范围内（导航），我不想在Header类中做同样的事情。

Answer 1

如果您希望两个组件共享相同的事件/状态，则需要执行反应文档所指的提升状态

您可以随意构建它，但是现在，您的$result = City::with('neighbourhoods.blocks')->get();正在保留您感兴趣的两个组件，但它们没有App.js。因此，这两个组件无法共享状态。你想要做的是在state中有一个事件处理程序，然后你作为一个道具传递给感兴趣的组件，并且在它自己的状态中包含一个App.js类。

一旦你触发toggle传递给function，就会告诉Navigation＆＃34;嘿，我刚刚做了你告诉我要做的事情，你是从这里＆＃34。 App.js会说＆＃34;好的，为我自己更新状态，这样你和App.js都能得到你需要的东西。＆＃34; Header将切换其状态，并将其作为支柱传递给App.js和Header。

在此处参考文档参考：https://facebook.github.io/react/docs/lifting-state-up.html#lifting-state-up

点击“汉堡菜单”并在React中打开侧面导航？

1 个答案: