具有删除功能的反应模式

Question

我有一个应用程序，它显示行中的项目列表。每个项目都有一个相应的删除按钮。当我单击它时，它会显示一个带有确认的模式。当我单击“取消”时，该操作被取消。当我单击“确认”时，模式如下：
1. 它显示一个加载图标
2. 它改变了样式（颜色和文字 - 现在它说它完成了）
3.它删除项目

到目前为止，我得到的只是显示模式，与本文相同：
https://daveceddia.com/open-modal-in-react/
加上单击确认时的控制台日志记录。
如何实现该功能？
我需要使用 Redux 吗？或者是否有某种用于确认对话框的库？

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

Answer 1

我需要使用 Redux 吗？

不，绝对不是

如何实现该功能？ [...] 或者是否有某种用于确认对话框的库？

听起来你已经在那里了。而不是console.log()确认，做这件事！我所说的“那个东西”指的是类似这样的东西......

handleConfirm = () => {
  this.setState({loading: true}); // show loading icon
  deleteItem(id)
    .then(() => {
      this.setState({
        loading: false, // hide loading icon
        success: true, // show colored success text
      });
    }
    .catch((err) => {
      // handle delete error here
    }

}

你的渲染函数看起来像这样......

render() {
  const { loading, success } = this.state;
  return (
    {loading && <Loading />}
    {success && <SuccessMessage />}
    {!loading && !success && <ConfirmMessageWithButtons />}
  )
}

更新：我看到您现在已经在代码沙箱上提供了代码，所以这里有一个使用您的代码的笨拙的解决方案。它很笨拙，因为它使用 setTimeouts 模拟异步操作

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Modal from './components/Modal';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { 
      isOpen: false,
      loading: false,
      success: false, 
    };
  }

  toggleModal = () => {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  };

  approveModal = () => {
    this.setState({loading: true });
    setTimeout(() => this.setState({ 
      loading: false,
      success: true 
    }), 1000)
    setTimeout(() => this.setState({ 
      isOpen: false 
    }), 3000)
  };

  render() {
    const { loading, success } = this.state;
    return (
      <div className="App">
        {!success && !loading && <p>Item to delete</p>}
        <button onClick={this.toggleModal}>Delete</button>

        <Modal show={this.state.isOpen} onApprove={this.approveModal} onClose={this.toggleModal}>
          {loading && "Loading..."}
          {success && "Success (make me green)"}
          {!success && !loading && "Here's some text for the modal"}
        </Modal>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

这是一个链接https://codesandbox.io/s/10o12zzk63

Answer 2

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

现在这不考虑加载和样式更改，但您可以将它们绑定到 MockModal 类中的操作以添加假加载图标（因为我们使用来自容器的数据，所以数据是即时的）。样式更改可以添加到 MockModal 中的 removeTask 方法中，或者您可以研究一种动画技术来增强 UI。以下纯属函数式实现。

如果您需要更多帮助，请告诉我。

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>