使用删除功能进行模态反应 [英] React modal with delete functionality

问题描述

我有一个应用程序，可以按行显示项目列表.每个项目都有一个相应的删除按钮.当我单击它时，它将显示一个带有确认的模态.当我单击取消"时，操作被取消.当我单击确认"模态时，请执行以下操作:
1.显示加载图标
2.更改样式(颜色和文本-现在说完成了)
3.删除项目

I have an app which shows a list of items in rows. Every item has a corresponding delete button. When I click it, it shows a modal with confirmation. When I click 'cancel', the action is canceled. When I click 'confirm' the modal do as follows:
1. It displays a loading icon
2. It changes the style (color and text - now it says it is done)
3. It removes the item

到目前为止，我得到的只是显示模态，与本文相同:
https://daveceddia.com/open-modal-in-react/
另外，单击确认时，仅控制台记录即可.
如何实现该功能?
我需要使用Redux吗?还是有一些用于确认对话框的库?

What I get so far is just displaying modal, same as in this article:
https://daveceddia.com/open-modal-in-react/
Plus just console logging when confirm is clicked.
How do I implement the feature?
Do I need to use Redux? Or is there some kind of library for confirmation dialogs?

我的代码: https://codesandbox.io/s/6n03myqw8w

推荐答案

下面是一个不使用Redux的示例.它显示了如何使用组件来解决必须依赖数据存储的问题.主容器保存数据和动作，我们只需传递这些动作和必要的数据即可删除和显示模式.

Here's an example without using Redux. It shows how to use components to get around the issue of having to rely on a data store. The main container holds the data and actions and we simply pass these actions and the necessary data to remove and display a modal.

现在，这并不能说明加载和样式更改，但是您可以将其绑定到MockModal类中的操作以添加伪造的加载图标(因为我们使用的是容器中的数据，因此数据是即时的).样式更改可以添加到MockModal中的 removeTask 方法中，或者您可以研究一种动画技术来增强UI.以下纯粹是功能性的实现.

Now this doesn't account for the loading and style changes but you can bind these to the actions within the MockModal class to add a fake loading icon (since we're using data from a container, the data is instant). The style change could be added to the removeTask method in MockModal, or you can look into an animation technique to enhance the UI. The below is purely a functional implementation.

让我知道是否需要更多帮助.

Let me know if you need more help.

class MockModal extends React.Component {
  removeTask = () => this.props.removeTask(this.props.data);
  closeModal = () => this.props.closeModal();
  render() {
    const { id, name } = this.props.data;
    if (this.props.displayModal) {
      return (
        <div>
          <h5>You want to delete task {id} : {name}</h5>
          <button onClick={this.removeTask}>Confirm</button>
          <button onClick={this.closeModal}>Close</button>
        </div>
      )
    }
    return null;
  }
}

class Task extends React.Component {
  showModal = (task) => this.props.show(this.props.task);
  render() {
    const { id, name } = this.props.task;
    return (
      <div>
        <h5>{id}:{name}</h5>
        <button onClick={this.showModal}>(REMOVE)</button>
      </div>
    )
  }
}

class App extends React.Component {
  state = {
    showModal: false,
    modal: {
      id: null,
      name: null,
    },
    tasks: [
      { id: 1, name: 'Star Wars' },
      { id: 2, name: 'Harry Potter' },
      { id: 3, name: 'Lord of the Rings' },
    ],
  }
  showModal = (task) => this.setState({ modal: task, showModal: true, });
  hideModal = () => this.setState({ showModal: false, });
  removeTask = (activeTask) => {
    const index = this.state.tasks.findIndex(task => {
      return task.id === activeTask.id;
    });
    this.setState({
      showModal: false,
      tasks: [
        ...this.state.tasks.slice(0, index),
        ...this.state.tasks.slice(index + 1),
      ]
    })
  }
  render(){
    return (
      <div>
        <MockModal 
          displayModal={this.state.showModal}
          closeModal={this.hideModal}          
          removeTask={this.removeTask}
          data={this.state.modal} 
        />
        {this.state.tasks.map(task => {
          return (
            <Task key={task.id} task={task} show={this.showModal} />
          )
        })}
      </div>
    )
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

这篇关于使用删除功能进行模态反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！