javascript - 添加和删​​除 JSON 对象的函数

Question

我有两个类别“A”和“B”。单击类别“A”的任何按钮时，将删除该按钮，并且必须移至类别“B”，单击类别“B”的任何按钮时，将按钮添加到类别“A”，并且必须从类别“B”移动。

export const LauncherButtons = [
{   
    linked: false,
    type: 'ABC',
    name: 'ReactJs'
},
{   
    linked: false,
    type: 'ABC',
    name: 'VueJS'
},
{   
    linked: true,
    type: 'XYZ',
    name: 'Angular'
},
{   
    linked: true,
    type: 'XYZ',
    name: 'Javascript'
}
];

这就是我为类别“A”渲染的内容。

 { LauncherButtons.map((button,index) => {
                return(
                button.linked === true &&
               <LauncherActionButton 
                text={button.name} 
                onClick = {this.removeAction}/>
                 );
            })}

渲染类别“B”。

{ LauncherButtons.map((button,index) => {
                  return(
                  button.linked !== true &&
                 <LauncherActionButtonAdd 
                  textAdd={button.name} 
                  onClick = {this.addAction}/>
                   );
                })}

所以基本上，当我单击类别“A”(True)的按钮时，它应该移动到类别“B”并变为 false，同样，当我单击类别“B”(False)的按钮时，它应该变为真并移至“A”类。

Answer 1

尝试这样的事情:https://codesandbox.io/s/holy-leftpad-hw1oe

我布置了两个部分，一个是事件部分，一个是非事件部分。通过单击按钮，您可以将其移动到另一侧。我不知道您的 LauncherActionButton 组件是什么样子，因此请将其视为一个简单的模板。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

export const LauncherButtons = [
  {
    linked: false,
    type: "ABC",
    name: "ReactJs"
  },
  {
    linked: false,
    type: "ABC",
    name: "VueJS"
  },
  {
    linked: true,
    type: "XYZ",
    name: "Angular"
  },
  {
    linked: true,
    type: "XYZ",
    name: "Javascript"
  }
];

class App extends React.Component {
  state = {
    buttons: LauncherButtons
  };

  createActiveButtons = () => {
    const { buttons } = this.state;
    return buttons
      .filter(button => {
        return button.linked;
      })
      .map(activeButton => {
        return (
          <button onClick={this.handleOnClick} name={activeButton.name}>
            {activeButton.name}
          </button>
        );
      });
  };

  createInactiveButtons = () => {
    const { buttons } = this.state;
    return buttons
      .filter(button => {
        return !button.linked;
      })
      .map(inactiveButton => {
        return (
          <button onClick={this.handleOnClick} name={inactiveButton.name}>
            {inactiveButton.name}
          </button>
        );
      });
  };

  handleOnClick = event => {
    const { buttons } = this.state;
    const { name } = event.target;

    let updatedButtons = buttons.map(button => {
      if (button.name === name) {
        return {
          ...button,
          linked: !button.linked
        };
      } else {
        return button;
      }
    });

    this.setState({
      buttons: updatedButtons
    });
  };

  render() {
    return (
      <div style={{ display: "flex" }}>
        <div style={{ width: "50%", background: "green", height: "300px" }}>
          {this.createActiveButtons()}
        </div>
        <div style={{ width: "50%", background: "red", height: "300px" }}>
          {this.createInactiveButtons()}
        </div>
      </div>
    );
  }
}