Question

我有Tab导航器，用于处理自身和其他两个同级组件的数据更改。

主要父组件，它根据三种情感进行数据获取和处理：正，负和中性作为 http post request 中的请求正文参数。

第二个父级组件，用于存储来自主父级组件的所有正数据，负数据和中性数据。

然后三个 子组件：表一和标签导航。

标签导航具有三个三个标签，即：正，负和中性。

默认情况下，页面在首次加载时立即呈现（不单击正选项卡按钮），它将获取正数据并将其显示在所有三个子组件中。然后点击“否定”标签，它将在所有三个子组件中显示否定数据，即表一和标签导航的否定标签下。中性制表符也是如此。

简而言之，Tab导航基于其活动状态并从父组件获取该数据来处理其自身和同级组件的数据呈现。

我尝试将活动事件从选项卡导航传递到其上层容器，但似乎无法正常工作。

Tab.js

import React, { Component } from 'react';


export default class Tab extends Component 
{
    constructor(props) 
    {
        super(props);
        this.state = 
        {   
            active: 'positive',

        }
    }



    toggle = (event) => 
    { 

        this.setState({
          active: event
        })

        this.props.sendEvent(this.state.active);
 }

    get_tab_content =()=>
    {
        switch(this.state.active)
        { 
            case 'positive':
                return <div><SomeDataComponent1 positiveprops={} /></div>; 
            case 'negative':
                return <div><SomeDataComponent2  negativeprops={}/></div>;
            case 'neutral':
                return <div><SomeDataComponent3  neutralprops={} /></div>;
            default : 
        }
    }

  render() {

    const tabStyles = {
        display: 'flex',
        justifyContent: 'center',
        listStyleType: 'none', 
        cursor: 'pointer', 
        width: '100px',
        padding: 5,
        margin: 4,
        fontSize: 20,
        color: 'green'
      }


    const tabStyles2 = {
        display: 'flex',
        justifyContent: 'center',
        listStyleType: 'none', 
        cursor: 'pointer', 
        width: '100px',
        padding: 5,
        margin: 4,
        fontSize: 20,
        color: 'red'
      }


      const tabStyles3 = {
        display: 'flex',
        justifyContent: 'center',
        listStyleType: 'none', 
        cursor: 'pointer', 
        width: '100px',
        padding: 5,
        margin: 4,
        fontSize: 20,
        color: 'yellow'
      }


    const linkStyles = {
      display: 'flex',
      justifyContent: 'center',
      color: '#000',
      listStyleType: 'none'
    }

    const divStyle = {
      border: '1px solid #34baa2',
        width: '450px'
    }

    const box = this.get_tab_content()

    return (
      <div style={divStyle} >
        <ul style={linkStyles}>
          <li style={tabStyles} onClick={function(){this.toggle('positive')}.bind(this)}>Positive</li>
          <li style={tabStyles2} onClick={function(){this.toggle('negative')}.bind(this)}>Negative</li>
          <li style={tabStyles3} onClick={function(){this.toggle('neutral')}.bind(this)}>Neutral</li>
        </ul>
        <div>
            {box}
        </div>
      </div>
    );
  }

 }

第二父Component.js

import React,{Component} from 'react';
import Tab from '../tab/tab';

import MentionTable from '../table/table';


class DataCharts extends Component{
constructor(props){
    super(props);

    this.state = {
        childEvent: ''
    }
}


getEvent = (childevent) => {
    this.setState({
        childEvent: childevent
    });

    console.log(this.state.childEvent)
}


    render(){
        const {positivetable,positivewords,  negativetable,  negativewords, neutraltable, neutralwords } = this.props;


        return(

                <div style={{display:'flex', flexDirection: 'row'}}>
                        <Table />

                        <Tab sendEvent={this.getEvent}/>
                </div> 

        )
    }
}


export default DataCharts;

Answer 1

我认为可以在setState回调中调用父函数，因为我们需要在 Tab.js

中这样做

this.setState({
          active: event
        }, () => { this.props.sendEvent(this.state.active)})

console.log(this.state.childEvent)也应该也在回调中，以便在更新后获得状态，我们也需要更改 DataCharts.js

this.setState({
              childEvent: childevent
            }, () => { console.log(this.state.childEvent)})


 Working demo -: https://stackblitz.com/edit/react-zhbmad

Answer 2

您的代码有问题的是以下几行：

  toggle = event => {
    this.setState({
      active: event
    });

    this.props.sendEvent(this.state.active);
  };

setState是异步的，因此您将不希望的状态发送到sendEvent。

  toggle = event => {
    this.setState(prevState => {
      console.log('prevState', prevState);
      console.log(event);
      this.props.sendEvent(event);
      return { active: event };
    });
  };

将活动标签事件传递给父级和同级组件

2 个答案: