具有删除功能的反应模式

class MockModal extends React.Component {移除任务 = () =>this.props.removeTask(this.props.data);closeModal = () =>this.props.closeModal();使成为() {常量 { id, name } = this.props.data;如果(this.props.displayModal){返回 (
<h5>你想删除任务 {id} : {name}</h5><button onClick={this.removeTask}>确认</button><button onClick={this.closeModal}>关闭</button></div>)}返回空值；}}类任务扩展 React.Component {showModal = (任务) =>this.props.show(this.props.task);使成为() {const { id, name } = this.props.task;返回 (
<h5>{id}:{name}</h5><button onClick={this.showModal}>(删除)</button></div>)}}类 App 扩展 React.Component {状态 = {显示模式:假，模态:{身份证:空，名称:空，},任务: [{ id: 1, name: '星球大战' },{ id: 2, name: '哈利波特' },{ id: 3, name: '指环王' },],}showModal = (任务) =>this.setState({ modal: task, showModal: true, });hideModal = () =>this.setState({ showModal: false, });removeTask = (activeTask) =>{常量索引 = this.state.tasks.findIndex(任务 => {返回 task.id === activeTask.id;});这个.setState({显示模式:假，任务: [...this.state.tasks.slice(0, index),...this.state.tasks.slice(index + 1),]})}使成为(){返回 (
<模拟模态displayModal={this.state.showModal}closeModal={this.hideModal}removeTask={this.removeTask}数据={this.state.modal}/>{this.state.tasks.map(task => {返回 (<任务键={task.id} 任务={task} 显示={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 src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="root"></div>

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>