Question

我有4个不同的div，每个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

我建议：

将按钮索引保存到state，然后
使用动态键（例如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

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

1 个答案: