Reactjs 如何在react中只打开map函数中的一个div，它不能打开其他div元素

这是我的代码部分，我使用了state，也设置了state functin，所以我可以切换state，但它在map函数中，所以它也在打开其他div，我只是想知道是否可以使用toggle函数只打开一个div

this.state = {
        show: false            
    }

commentInputHandler = () => {
    console.log("working")
    this.setState({
        show: !this.state.show
    })
}

            <div className="col-lg-8 offset-lg-2 pb-5">
                {this.state.posts.map(post => (
                    <div key={post._id} className="card mt-4">
                        <div className="card-body">
                            <div className="d-flex justify-content-between align-items-center">
                                <h4 className="card-title w-75">{post.title}</h4>
                                <div className="w-25 text-right">
                                    <span onClick={() => this.deletePost(post._id)} className="badge badge-danger cp">Delete</span>
                                    <span className="badge badge-primary cp ml-3">
                                        <Link className="text-white" to={`/postupdate/${post._id}`}>Update</Link>
                                    </span>
                                </div>
                            </div>
                            <p className="card-text">
                                {post.body}
                            </p>
                        </div>
                        <div className="card-footer">
                            <div className="d-flex justify-content-end">
                                <span onClick={this.commentInputHandler} className="badge badge-pill badge-primary mr-3 cp">Comment</span>
                                <span onClick={this.handleClickOpen} className="badge badge-pill badge-info cp">View comment</span>
                            </div>
                            {this.state.show ?
                                <div>
                                    <form className="mt-3">
                                        <input
                                            type="text"
                                            className="form-control"
                                            placeholder="Add comment"
                                        />
                                        <div className="d-flex justify-content-end">
                                            <button className="btn btn-primary btn-sm mt-2">Comment</button>
                                        </div>
                                    </form>
                                </div> : null
                            }

                        </div>
                    </div>
                ))}

            </div>

this.state={
节目：假
}
commentInputHandler=（）=>{
控制台日志（“工作”）
这是我的国家({
show:！this.state.show
})
}
{this.state.posts.map（post=>(
{post.title}
this.deletePost（post.\u id）}className=“badge badge danger cp”>删除
更新

{post.body}

评论
查看评论
{this.state.show？
评论
：null
}
))}

现在，您有一个单一的

状态。show

由map生成的所有元素共享。您可以使

state.show

成为一个数组，但是有一种更好的方法来处理这个问题

您应该创建一个单独的组件，将所有代码放在map函数中。将

状态。在新的子组件中显示
和
commentInputHandler
。然后，每个子组件将能够独立于其他组件显示/隐藏自己

家长

{this.state.posts.map(post => <PostComponent key={post.id} post={post}/>)}

this.state = { show: false }

commentInputHandler = () => {
...

render()
    return (
        <div className="card mt-4">
        ...

{this.state.posts.map（post=>）}

后组件

{this.state.posts.map(post => <PostComponent key={post.id} post={post}/>)}

this.state = { show: false }

commentInputHandler = () => {
...

render()
    return (
        <div className="card mt-4">
        ...

this.state={show:false}
commentInputHandler=（）=>{
...
render（）
返回(
...
现在
show
状态仅适用于一个布尔值，您可以将其更改为一个对象，该对象将以
\u id
为键保存每个post
show
条件（当然，您可以将其直接添加到
posts
状态，只是您没有将其附加到代码中…）



现在，您可以将
commentInputHandler
更改为动态内容


它确实帮助了我，但我不能用它作为切换按钮。
  {this.state.show[post._id] ? ...