Question

我有一个应用程序，显示行中的项目列表。每个项目都有一个相应的删除按钮。当我点击它时，它会显示一个带有确认的模态。当我点击取消＆＃39;时，操作会被取消。当我点击确认＆＃39;模态如下：
1.显示加载图标
它改变了风格（颜色和文字 - 现在它说完了）
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 />}
  )
}

更新：我发现你现在已经在代码沙箱上提供了代码，所以这是一个使用你的代码的kludgy解决方案。它是kludgy，因为它使用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>

具有删除功能的React模式

2 个答案: