在 React 组件中的 onClick 事件上删除特定的表格行

Question

我是 React 的新手，并且在删除记录后苦苦思索如何操作 DOM。我有一些反应组件，但我关注的一个是删除我设置的 rails api 中的记录。我在 Ajax onclick 调用中删除了记录，但不知道使用 React 删除特定行的最佳方法。

充满数据的表格

var ContactAll = React.createClass({
  getInitialState: function() {
    return {
      contacts: [] 
    }
  },
  componentDidMount: function() {
    $.ajax({
      dataType: "json",
      url: '/all-contacts',
      type: "GET",
      context: this,
      success: function(data, status, xhr) {
        this.setState({ contacts: data });
      }
    });
  },
  render: function(){
    if(this.state.contacts == 0) {
      return (
        <div>Loading</div>
      )
    } else {
      var contactComponents = this.state.contacts.map(function(contact, i) {
        var full_name = contact.first_name + ' ' + contact.last_name

        return  <tr key={i} className="contact">
                  <td>{ full_name}</td>
                  <td></td>
                  <td>{ contact.email_address }</td>
                  <td>{ contact.phone_number }</td>
                  <td>{ contact.company_name }</td>
                  <td><DeleteButton email={contact.email_address} /></td>
                </tr>;
      });
      return <div>
              <table>
                <tbody>
                <tr>
                  <th>Contact Name</th>
                  <th></th>
                  <th>Email Address</th>
                  <th>Phone Number</th>
                  <th>Company Name</th>
                </tr>

                {contactComponents};

                </tbody>
              </table>
             </div>
    }
  }
});

ContactAll 组件中的删除按钮

var DeleteButton = React.createClass({
  onClick: function() {
    var email = this.props.email;

    $.ajax({
      data: {email_address: email },
      url: '/delete-contact',
      dataType: 'html',
      type: "POST",
      success: function(data, status, xhr) {
        $('.delete-success').slideDown(400);
        setTimeout(function() { $(".delete-success").slideUp(400); }, 5000);
      }
    });
  },
  render: function(){
    return(
      <button onClick={() => { this.onClick(this.props.email) }}>Delete</button>
    )
  }
});

单击相应行的删除按钮时，删除特定行的最佳方法是什么？

谢谢！

Answer 1

创建一个删除函数，然后将数组的索引发送到该函数中，并使用 splice 删除该数组条目。将此deleteRow 函数的引用传递给子组件并从那里调用它，例如this.props.deleteRow(this.props.index);。查看完整代码

喜欢

deleteRow: function(index) {
    var contacts = [...this.state.contacts];
    contacts.splice(index, 1);
    this.setState({contacts});
  },

deleteRow: function(index) {
    var contacts = [...this.state.contacts];
    contacts.splice(index, 1);
    this.setState({contacts});
  },