单击时反应子组件和父组件的状态更改

Question

我正在尝试单击子 React 组件的按钮来更改子组件及其父组件的布尔状态。 这里的问题是它必须改变两个组件的状态。

这是我正在尝试使用的代码的链接：

https://stackblitz.com/edit/child-to-parent-state-pass-bkmvwc?file=Child.js

要求是点击汉堡按钮，它会改变子组件（实际的汉堡按钮）及其父组件的状态。

谢谢！

Answer 1

我不建议你做你正在做的事情。 但是，对你的背景一无所知，我只会回答你的问题。

在 parent.js 中，您缺少对此的绑定。 改用这一行并检查它是否有效

Answer 2

为什么不从父组件like管理状态：

Parent.js：

import React from 'react'
import { Link } from 'react-router-dom'
import { initializeIcons } from '@uifabric/icons';
import Hamburger from './Child'
initializeIcons();

export default class NavBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      opened: false
     };
  }
  handleCounter = () => {
    this.setState({ opened: !this.state.opened });
  }
  render() {
    return (
        <Hamburger 
          opened={this.state.opened} 
          handleCounter={this.handleCounter}
        />
    );
  }
}

Child.js

import React from 'react'
import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { initializeIcons } from '@uifabric/icons';
initializeIcons();


export default class Hamburger extends React.Component {
  constructor(props) {
    super(props);
  }
  updateParent() {
    this.props.handleCounter(this.state);
  }
  render() {

    return (
      <IconButton
        checked={this.props.opened}
        iconProps={{ iconName: (this.props.opened ? 'Cancel' : 'GlobalNavButton'), style: { fontSize: 35 } }} 
        className="hamburger mobile-only"
        title="Open Global Navigation" 
        ariaLabel="Open Global Navigation"
        styles={{
          root: {
            padding: '0',
            border: 'none',
            background: 'transparent !important'
          }
        }}
        onClick={this.props.handleCounter}
      />
    );
  }
}

PS：为了便于阅读，我删除了 cmets

Answer 3

您只会更改父级的状态。孩子只会阅读传递给它的道具。

父组件

constructor(props){
  super(props)
  this.state = {
    hamburgerOpen: false
  }
}

handleHamburgerToggle = () => {
  let { hamburgerOpen } = this.state;
  this.setState({
     hamburgerOpen: !hamburgerOpen
  })
}

render() {
  let { hamburgerOpen } = this.state;

  return (
     <Child
       hamburgerOpen={hamburgerOpen}
       handleHamburgerToggle={this.handleHamburgerToggle}
     />
  )
}

孩子将有权访问传递给它的道具。您也可以将 Hamburger 设为功能组件，因为它不关心当前状态，只关心父级。

hamburgerOpen 和 toggleHamburgerOpen

子组件

const { handleHamburgerToggle } = this.props;
return {
  <div>
    <div
      onClick={() => handleHamburgerToggle()}
    >
    Click me to toggle hamburger
    </div>
  </div>
}