Question

我的意图是在单击相应元素时触发handleClick方法，以便在active和false之间切换状态的true属性。如果在render内调用它是导致问题的原因，那么单击该元素时如何调用handleClick方法？

import React, { Component } from 'react';
import styled from 'styled-components';

const NestedProperty = styled.div`
  margin-left: 2rem;
`;

const ParentContainer = styled.div`
  display: flex;
  flex-direction: column;
`;

const NestedContainer = styled.div`
  display: flex;
  flex-direction: column;
`;

class SideMenuContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
        active: false
    };
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(){
    console.log("toggle click!")
    this.setState({active : !this.state.active});
  }

  render() {
    if (this.state.active == true){
      return (
        <ParentContainer>
          <p onClick={() => this.props.handleClick()}>{this.props.parentName}</p>
          <NestedContainer>

            {this.props.properties.map(propertyElement => {
              return (
                <NestedProperty onClick={() => { this.props.changeInfoList(propertyElement.name, propertyElement.data_type, propertyElement.app_keys.join(', '))}} >
                  {propertyElement.name}
                </NestedProperty>
              );
            })}
          </NestedContainer>
        </ParentContainer>
      );    
    }

    else {
      return (
        <ParentContainer>
          <p onClick={this.handleClick()}>{this.props.parentName}</p>
        </ParentContainer>
      );
    }

  }
}

export default SideMenuContainer;

Answer 1

这将解决它。

 else {
      return (
        <ParentContainer>
          <p onClick={() => this.handleClick()}>{this.props.parentName}</p>
        </ParentContainer>
      );
    }

您最初有这个。

 else {
      return (
        <ParentContainer>
          <p onClick={this.handleClick()}>{this.props.parentName}</p>
        </ParentContainer>
      );
    }

如果要执行此操作，则需要排除（）并仅执行this.handleClick。

由于在渲染方法中调用了onClick方法，导致出现“无法在现有状态转换期间更新”错误

1 个答案: