javascript - 具有删除功能的 React 模态

Question

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

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

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

Answer 1

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

现在这不考虑加载和样式更改，但您可以将它们绑定(bind)到 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>