Question

我有两个组成部分。他们中的第一个看起来像这样

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      change: false
    };

    this.handleSwitch = this.handleSwitch.bind(this);
  }

  handleSwitch = () => {
    const { change } = this.state;
    this.setState({ change: !change })
    console.log(this.state.change)
  }

  render() {
    const { change } = this.state;

    return (
      <>
        <UserProfilPanel handleSwitch={this.handleSwitch}/>
        {
          change ? <UserProfilGallery /> : <UserProfilContent />
        }
      </>
    );
  }
}

它向UserProfile Panel组件传递了负责更改状态的功能。

const UserProfil = (handleSwitch) => {
  return (
    <Container>
      <div>
        <button onClick={() => handleSwitch}>
          gallery
        </button>
        <button onClick={() => handleSwitch}>
          info
        </button>
      </div>
    </Container>
  )
}

当我按一些按钮时，什么也没发生。控制台也不会出现错误。

如何解决此问题？我想在点击按钮后更改内容

Answer 1

UserProfil()中的第一个参数是props。要仅分解props对象的特定属性，您需要执行以下操作：

const UserProfil = ({handleSwitch}) => {...

然后在您的onClick匿名函数中，您需要调用handleSwitch()

<button onClick={() => handleSwitch()}>
                           //      ^^  call function

没有函数调用-onclick不起作用

1 个答案: