在兄弟姐妹 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，请使用此解决方案，如果您想要多个，则应使用 arup 方法