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

IT技术 javascript reactjs
2021-05-09 07:34:40

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

到目前为止，我所做的只是在每个 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

提前致谢。

2个回答

您需要保持当前单击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]
      };
    }
  });
};

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

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

如果我理解正确，并且您只想显示单击的 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 方法

其它你可能感兴趣的问题
上一篇当我尝试将props传递给孩子时，映射不是函数错误 下一篇如何避免在回调中使用 setState