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方法。

在React.js之间传递索引

2 个答案: