将活动选项卡事件传递给父组件和兄弟组件

Question

将活动选项卡事件传递给父组件和兄弟组件

3

我有一个 Tab 导航器，可以处理它自己和其他两个兄弟组件的数据更改。 主父组件会根据三种情感（积极、消极和中性）作为请求体参数在http post请求上进行数据获取和操作。 第二个父组件会存储来自主父组件的所有积极数据、消极数据和中性数据。

然后是三个子组件：表格一和选项卡导航。

选项卡导航有三个标签页，分别是：积极、消极和中性。当页面首次加载时，默认情况下（没有点击积极选项卡按钮），它会获取积极数据并在所有三个子组件中显示。然后，在点击负面选项卡时，应在所有三个子组件中显示负面数据，即表格一和选项卡导航的负面选项卡下。对于中性选项卡也是如此。

简而言之，选项卡导航基于其活动状态并从父组件获取数据来处理其自身和兄弟组件的数据呈现。

我试图将活动事件从选项卡导航传递到其上层容器，但似乎效果不佳。

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>
    );
  }

 }

第二个父组件.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;

- program_bumble_bee

你的代码运行良好，https://codesandbox.io/embed/passing-props-wfg53，请编辑此沙盒并解释你的问题。 - Dennis Vash

@DennisVash 请检查控制台。当我点击正面选项卡时，它会在控制台中输出负面的结果；当我点击负面选项卡时，它会输出中性的结果，以此类推。控制台输出的顺序并不是按照活动选项卡的顺序打印的。 - program_bumble_bee

2个回答

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

- Abhisar Tripathi

仍未解决。 - program_bumble_bee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dennis Vash · Accepted Answer

你的代码问题在于下面的行：

  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 };
    });
  };