如何根据reactjs中单击的删除按钮显示加载信息

Question

下面的代码通过删除记录工作正常。

现在正在尝试显示文本 正在加载。正在删除... 仅针对被单击的特定按钮。

这是我的问题，当我点击单个记录按钮时，我可以看到文本正在加载。正在删除... 显示在所有记录中，而不是显示我单击的那个特定按钮。

我曾尝试使用 id 来指示单击的行按钮，但无法按照以下方式使其工作我使用 handleDeleteRow() 函数

进行设置

this.setState({loading_id: false});
this.setState({loading_id: true});

我在渲染时设置了这个

{loading_person.id && <span>Loading. deleting in progress...</span>}

这里是代码

import React from "react";
import { render } from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", name: "user 1" },
        { id: "2", name: "user 2"},
        { id: "3", name: "user 3"}
      ]
    });

 this.handleDeleteRow = this.handleDeleteRow.bind(this);
  }



handleDeleteRow = (id) => {
    this.setState({loading: true});
alert(id);
    let data = [...this.state.data];
    data.splice(id, 1);
    this.setState({ 
      data: data
    });
    this.setState({loading: false});
  }




  render() {

const {loading} = this.state;
    return (
      <span>
        <label>
          <ul>
            {this.state.data.map(person => (
              <li key={person.id}>
                {person.name}
                <br />

<button onClick={() => this.handleDeleteRow(person.id)} style={{color:'red'}}>Delete</button>
{loading && <span>Loading. deleting in progress...</span>}
              </li>
            ))}
          </ul>
        </label>
      </span>
    );
  }
}


export default App;

Answer 1

您可以存储被删除对象的id，并根据存储的id启用加载指示器。而不是 this.setState({loading: true})，在 handleDeleteRow:

中使用它

this.setState({deletedId: id});

并在渲染中：

{this.state.deletedId===person.id && Loading. deleting in progress...

Answer 2

像这样用加载微调器切换按钮

{!loading?<button onClick={() => this.handleDeleteRow(person.id)} style={{color:'red'}}>Delete</button>
: <span>Loading. deleting in progress...</span>}

如何根据reactjs中单击的删除按钮显示加载信息

How to display loading info based on clicked delete button in reactjs

reactjs