在兄弟 React.js 之间传递索引

Question

我试图将索引从一个元素传递到同级元素以在第二个元素中显示。 连续第二天无法在互联网上找到解决方案。

到目前为止，我所做的只是在每个 div 中显示数据。 我只想点击一次。

class Result extends Component {
    constructor(props) {
      super(props)

      this.state = {
         showData: false
      }
    }

    showData = (el, index) => {
        this.setState({
            showData: !this.state.showData
        })
        console.log(el, index)
    }

    render() {
        const { dataFromSearchBar, inputValue } = this.props 
        const showData = this.state.showData
        let apiData = dataFromSearchBar.filter(el => {
            return el.launch_year === inputValue
        }).map((el, index) => {
            return (
                <div className={css(styles.result__data)}
                     key={index}>
                    <h2 onClick={() => this.showData(el, index)}>{el.mission_name}</h2>
                    {showData && 
                        <li key={index}>{el.launch_date_utc}</li>
                    }
                </div>
            )
        })
      return (
        <div className="result">
            {apiData}
        </div>
      )
    }
}

这是部署在 gh 页面上的应用程序： https : //kamilstaszewski.github.io/spacex-api-app/

在这里您可以找到该应用程序的代码： https : //github.com/KamilStaszewski/spacex-api-app/tree/master/src

提前致谢。

Answer 1

您需要保持当前单击Result组件的标题索引的状态。 喜欢

this.state = {
  currentClickedResultIndex: []
}

然后更改处理程序应该是：

showData = index => e => {
  this.setState(({ currentClickedResultIndex }) => {
    if (currentClickedResultIndex.includes(index)) {
      return {
        currentClickedResultIndex: currentClickedResultIndex.filter(
          number => number !== index
        )
      };
    } else {
      return {
        currentClickedResultIndex: [...currentClickedResultIndex, index]
      };
    }
  });
};

并在从Result渲染的 html 中将其修改为：

<h2 onClick={this.showData(index)}>{el.mission_name}</h2>;
{
  this.state.currentClickedResultIndex.includes(index) && (
    <li>{el.launch_date_utc}</li>
  );
}

Answer 2

如果我理解正确，并且您只想显示单击的 div 数据，那么我建议向状态添加另一个属性，例如displayIndex ：

  this.state = {
     displayIndex:-1
  }

showData = (el, index) => {
    this.setState(prevState) => ({
        displayIndex: index===prevState.displayIndex? -1 : index
    })
    console.log(el, index)
}

进而 ：

                {(index===this.state.displayIndex) && 
                    <li key={index}>{el.launch_date_utc}</li>
                }

编辑：如果您只想在任何时候显示一个 div，则使用此解决方案，如果您想要多个 div，则应使用 arup 方法