Как обновить состояние в функции карты в ReactionJS

Question

У меня 4 кнопки, каждая кнопка имеет идентификатор имени и выбранный логический флаг.

То, чего я пытаюсь добиться, это то, что при нажатии кнопки должен быть изменен логический флаг кнопки для этой конкретной кнопки. Для этого мне нужно установить setState в функции карты для этого конкретного идентификатора кнопки.

Моя проблема в том, что я не могу установить функцию State в карте для этой конкретной нажатой кнопки, ее btnSelected следует изменить

Моя цель состоит в том, чтобы создать кнопку множественного выбора для отмены выбора. Это своего рода выбор интересов для пользователя, основанный на том, что он отражает пользовательский интерфейс, а также мой массив. Вот мой код.

Спасибо в ожидании.

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

Answer 1

Вы можете сделать это, передав индекс из карты в функцию handleClick каждой кнопки, которая затем вернет другую функцию, которая может быть вызвана событием onClick.

В отличие от ответа Колина Рикардо, этот подход позволяет избежать добавления проповеди id для каждого дочернего элемента функции карты, которая используется только для определения индекса в handleClick. Я изменил пример Колина, чтобы показать сравнение. Обратите внимание, что параметр события больше не нужен.

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

Рабочий пример здесь

Answer 2

Вот как вы делаете что-то вроде этого:

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

Рабочий пример здесь .