Question

我需要在删除项目之前使用React.js显示确认对话框。我在下面解释我的代码。

import React, { Component } from "react";
import TodoItems from "./TodoItems";
import "./TodoList.css";
class TodoList extends Component {
  constructor(props, context){
    super(props, context);
    this.state={
      items:[]
    }
    this.addItem=this.addItem.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
    this.editItem = this.editItem.bind(this);
  }
  addItem(e){
    e.preventDefault();
    if(this.state.editKey){
      this.saveEditedText();
      return;
    }
    var itemArray = this.state.items;
    if (this.inputElement.value !== '') {
      itemArray.unshift({
        text:this.inputElement.value,
        key:Date.now()
      })
      this.setState({
        items:itemArray
      })
      this.inputElement.value='';
    }
  }
  deleteItem(key) {
    var filteredItems = this.state.items.filter(function (item) {
      return (item.key !== key);
    });

    this.setState({
      items: filteredItems
    });
  }
  editItem(key){
    this.state.items.map(item =>{
      if (item.key==key) {
        this.inputElement.value=item.text;
      }
    })
    this.setState({editKey: key});
  }
  saveEditedText(){
    let value = this.inputElement.value;
    this.setState(prevState => ({
      items: prevState.items.map(el => {
        if(el.key == prevState.editKey)
          return Object.assign({}, el, {text: value});
         return el;
      }),
      editKey: ''
    }));
    this.inputElement.value='';
  }
  render() {
    return (
      <div className="todoListMain">
        <div className="header">
          <form onSubmit={this.addItem}>
            <input ref={(a)=>this.inputElement=a} placeholder="enter task">
            </input>
            <button type="submit">{this.state.editKey? "Update": "Add"}</button>
          </form>
        </div>
        <TodoItems entries={this.state.items} delete={this.deleteItem} edit={this.editItem}/>
      </div>
    );
  }
}

export default TodoList;

这里我需要在删除项目之前显示confirm对话框，并且在添加/更新之后我需要使用任何div使用innerHTML/insertAdjacentElement在表单上方显示成功消息。

Answer 1

在传递给TodoItems的删除回调中，在本例中为deleteItem，您可以使用浏览器的确认对话框提示用户：

const result = window.confirm(yourMessage)

并在警卫声明中使用result。

如何使用React.js显示确认消息并绑定成功消息

1 个答案: