如何在reactjs中更新地图功能中的状态

Posted 2023-02-22

【中文标题】如何在reactjs中更新地图功能中的状态

【英文标题】：How to update state in map function in reactjs

【发布时间】：2018-10-09 14:44:10

【问题描述】：

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

我想要实现的是，在单击按钮时，应该更改该特定按钮的布尔按钮标志。为此，我需要在地图函数中为该特定按钮 ID 设置状态。

我的问题是我无法在地图功能中为该特定单击按钮设置状态，应更改其 btnSelected

我的目标是创建一个多选取消选择按钮。它为用户提供了一种兴趣选择，并在此基础上反映了 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>
    );
  

【问题讨论】：

你遇到了什么错误？

所以很清楚你想要做什么，但你从来没有真正问过问题

请原谅@colin，更新了我的问题

【参考方案1】：

您可以这样做：

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'));

工作示例here。

【讨论】：

谢谢@Colin，但是我们能用我上面的代码实现这个吗？

@MohammedSabir 这是同一个概念。如果你举个例子here我帮你看看。

更改见控制台

Here 是您的代码的一个工作示例。

尝试重新加载页面。

【参考方案2】：

您可以通过将地图中的索引传递给每个按钮的 handleClick 函数来实现此目的，然后该函数将返回另一个可由 onClick 事件触发的函数。

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

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

  handleClick = (index) => () => 
    const  posts  = this.state;
    posts[index].selected = !this.state.posts[index].selected
    this.setState( posts )
  

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


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

工作示例here