javascript - 使用 React 将索引作为状态传递给组件

Question

我有 4 个不同的 div，每个都包含自己的按钮。单击按钮时，div 会调用函数并当前将状态设置为显示模式。我遇到的问题是传递单击的按钮的索引。

在下面的代码中，我需要能够说“image0”或“image1”，具体取决于我单击的按钮的索引

JS:

handleSort(value) {
  console.log(value);
  this.setState(prevState => ({ childVisible: !prevState.childVisible }));
}


const Features = Array(4).fill("").map((a, p) => {
 return ( 
    <button key={ p } onClick={ () => this.handleSort(p) }></button>
  )
});



{ posts.map(({ node: post }) => (
this.state.childVisible ? <Modal key={ post.id } data={ post.frontmatter.main.image1.image } /> : null
    ))

}

Answer 1

我建议:

1. 将按钮索引保存到state中，然后
2. 使用动态键(例如 object['dynamic' + 'key'])从 post.frontmatter.main.image1.image 中选择正确的键

-

class TheButtons extends React.Component {
  handleSort(value) {
    this.setState({selectedIndex: value, /* add your other state here too! */});
  }

  render() {
    return (
      <div className="root">
        <div className="buttons">
          Array(4).fill("").map((_, i) => <button key={i} onClick={() => handleSort(i)} />)
        </div>
        <div>
          posts.map(({ node: post }) => (this.state.childVisible
            ? <Modal
                key={ post.id }
                data={ post.frontmatter.main.[`image${this.state.selectedIndex}`].image }
              /> 
            : null
          ))
        </div>
      </div>
    );
  }
}

这是一个很好的答案，它解释了“使用变量动态访问对象属性”:https://stackoverflow.com/a/4244912/5776910