如何在reactjs中更新map函数中的状态

我有4个按钮，每个按钮都有名称id和选定的布尔标志

我试图实现的是，单击按钮时，布尔按钮标志应该更改该特定按钮。为此，我需要在map函数中为特定的按钮Id设置state

我的问题是，我无法在映射函数中为特定的单击按钮设置状态，它的bSelected应该更改

我的目标是创建一个多选择取消选择按钮。它是一种用户感兴趣的选择，并基于它来反映UI以及我的数组。这是我的密码

谢谢你的期待

import React, { Component } from "react";
import { Redirect } from "react-router-dom";

export default class Test extends Component {
  constructor(props, context) {
    super(props, context);

    this.handleChange = this.handleChange.bind(this);
    this.state = {
      value: "",
      numbers: [1, 2, 3, 4, 5],
      posts: [
        {
          id: 1,
          topic: "Animal",
          btnSelected: false
        },
        {
          id: 2,
          topic: "Food",
          btnSelected: false
        },
        {
          id: 3,
          topic: "Planet",
          btnSelected: false
        },
        { id: 4, topic: "Nature", btnSelected: false }
      ],
      allInterest: []
    };
  }

  handleChange(e) {
    //console.log(e.target.value);
    const name = e.target.name;
    const value = e.target.value;
    this.setState({ [name]: value });
  }

  getInterest(id) {
    this.state.posts.map(post => {
      if (id === post.id) {
        //How to setState of post only btnSelected should change
      }
    });
    console.log(this.state.allInterest);
    if (this.state.allInterest.length > 0) {
      console.log("Yes we exits");
    } else {
      console.log(id);
      this.setState(
        {
          allInterest: this.state.allInterest.concat(id)
        },
        function() {
          console.log(this.state);
        }
      );
    }
  }

  render() {
    return (
      <div>
        {this.state.posts.map((posts, index) => (
          <li
            key={"tab" + index}
            class="btn btn-default"
            onClick={() => this.getInterest(posts.id)}
          >
            {posts.topic}
            <Glyphicon
              glyph={posts.btnSelected === true ? "ok-sign" : "remove-circle"}
            />
          </li>
        ))}
      </div>
    );
  }
}

import React，{Component}来自“React”；
从“react router dom”导入{Redirect}；
导出默认类测试扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
this.handleChange=this.handleChange.bind（this）；
此.state={
值：“”，
编号：[1,2,3,4,5]，
职位：[
{
id:1，
主题：“动物”，
b所选：false
},
{
id:2，
主题：“食物”，
b所选：false
},
{
id:3，
主题：“行星”，
b所选：false
},
{id:4，主题：“自然”，b选择：false}
],
allInterest:[]
};
}
手变（e）{
//console.log（如target.value）；
const name=e.target.name；
常量值=e.target.value；
this.setState（{[name]：value}）；
}
获取兴趣（id）{
this.state.posts.map（post=>{
if（id==post.id）{
//如何设置只有B选择的post状态应更改
}
});
console.log（this.state.allInterest）；
如果（this.state.allInterest.length>0）{
log（“是的，我们退出”）；
}否则{
console.log（id）；
这是我的国家(
{
allInterest:this.state.allInterest.concat（id）
},
函数（）{
console.log（this.state）；
}
);
}
}
render（）{
返回(
{this.state.posts.map（（posts，index）=>(
this.getInterest（posts.id）}
>
{posts.topic}

))}
);
}
}

以下是您执行类似操作的方法：

class App extends Component {
  state = {
    posts: [{
      name: 'cat',
      selected: false,
    }, {
      name: 'dog',
      selected: false
    }]
  }

  handleClick = (e) => {
    const { posts } = this.state;
    const { id } = e.target;
    posts[id].selected = !this.state.posts[id].selected
    this.setState({ posts })
  }

  render() {
    return (
      <div>
        <form>
          {this.state.posts.map((p, i) => {
            return (
              <div>
                <label>{p.name}</label>
                <input type="radio" id={i} key={i} checked={p.selected} onClick={this.handleClick} />
              </div>
            )
          })}
        </form>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

类应用程序扩展组件{
状态={
职位：[{
名字：'猫'，
选择：false，
}, {
名字：“狗”，
所选：false
}]
}
handleClick=（e）=>{
const{posts}=this.state；
const{id}=e.target；
posts[id]。selected=！this.state.posts[id]。selected
this.setState（{posts}）
}
render（）{
返回(
{this.state.posts.map（（p，i）=>{
返回(
{p.name}
)
})}
);
}
}
render（.
您可以通过将索引从贴图传递到每个按钮的handleClick函数中来完成此操作，该函数将返回另一个可由onClick事件触发的函数

与Colin Ricardo的答案相反，这种方法避免了在map函数的每个子函数上添加一个id属性，该子函数仅用于确定handleClick中的索引。我在这里修改了Colin的示例以显示比较。请注意，事件参数不再是必需的

类应用程序扩展组件{
状态={
职位：[{
名字：'猫'，
选择：false，
}, {
名字：“狗”，
所选：false
}]
}
handleClick=（索引）=>（）=>{
const{posts}=this.state；
posts[index]。selected=！this.state.posts[index]。selected
this.setState（{posts}）
}
render（）{
返回(
{this.state.posts.map（（p，i）=>{
返回(
{p.name}
)
})}
);
}
}
提供（
你犯了什么错误？很清楚你想做什么，但你从来没有问过问题对不起@colin，更新了我的问题谢谢@colin，但我们能用我上面的代码实现吗？@MohammedSabir，这是相同的概念。如果你举个例子，我会帮你看看。有关更改，请参阅控制台是一个有效的考试请输入您的代码。尝试重新加载页面。