Javascript 反应-如何从数组中独立切换项（从DB加载）？ 构造函数（道具）{ 超级（道具）； 此.state={ 员额：[]， 加载：正确 }; } componentDidMount（）{ axios.get（“/posts”） 。然后（响应=>{ console.log（'--'）； console.log（response.data）； console.log（'--'）； this.setState（{posts:response.data，load:false}）； }); } 切换项（索引）{ log（'单击索引：'+索引）； } 渲染（）{ 让内容； if（this.state.loading）{ 内容='加载…'； }否则{ content=this.state.posts.map（post=>{ 返回( {post.created_at} 切换消息 {post.message} ) }); } 返回( 帖子！ {content} x );

我试图实现的目标-当有人单击按钮时，我想切换（显示或隐藏）相应的

.msg

。 在哪里我挣扎-我想默认隐藏所有消息，当点击按钮时，然后显示相应的消息。但我不知道如何在React中做到这一点-一个想法是使用CSS在默认情况下隐藏它们，然后为点击的项目创建一个新的状态

---

或者我应该预先创建一个状态数组来监视所有消息吗？

您可以根据每个项的布尔键有条件地添加

CSS

类或样式。
单击项时，只需翻转布尔值

下面是一个小的运行示例：

类项扩展React.Component{
onClick=（）=>{
const{onClick，id}=this.props；
onClick（id）；
}
render（）{
const{name，active}=this.props；
返回(
{name}
);
}
}
类应用程序扩展了React.Component{
状态={
项目：[
{name:'Item 1'，id:1}，
{name:'Item 2'，id:2}，
{name:'Item 3'，id:3}，
{name:'Item 4'，id:4}，
{名称：'项目5'，id:5}，
]
}
onItemClick=id=>{
this.setState（prev=>{
常量{items}=prev；
const nextItems=items.map（item=>{
如果（item.id！==id）返回项目；
返回{
…项目，
活动：！item.active
}
});
返回{…prev，items:nextitems}；
});
}
render（）{
const{items}=this.state；
返回(
{
items.map（item=>(
))
}
);
}
}
ReactDOM.render（，document.getElementById（'root'）；

constructor(props) {
  super(props);

  this.state = {
    posts: [],
    loading: true
  };
}

componentDidMount() {
    axios.get('/posts')
        .then(response => {
            console.log('---');
            console.log(response.data);
            console.log('---');
        this.setState({ posts: response.data, loading: false });
    });
}

toggleItem(index) {
    console.log('clicked index: '+index);
}

render () {
    let content;
    if (this.state.loading) {
        content = 'Loading...';
    } else {
        content = this.state.posts.map(post => {
        return(
            <li key={post.id} className={}>
                <div>   
                    <Moment format="MMM DD @ HH:MM">
                        <span className="badge badge-pill badge-primary">{post.created_at}</span>
                    </Moment>
                    <button className="btn btn-primary btn-sm" onClick={this.toggleItem.bind(this, post.id)}>Toggle Message</button>
                </div>
                <div className="msg">{post.message}</div>
            </li>
            )
        });
    }
    return (
            <div>
              <h1>Posts!</h1>
                <div className="row">
                    <div className="col-md-6">
                        {content}
                    </div>
                    <div className="col-md-6">
                        x
                    </div>
                </div>
          </div>
    );