javascript - 如何仅在单击按钮的行更新按钮？

Question

目前，当我单击任何按钮时，所有编辑按钮都会更改为更新按钮，但我只想触发实际执行操作的行而不触发任何其他按钮。我在我的 ReactJs 项目中使用下面的代码片段。任何人都可以帮忙提出一些对我有用的建议。请注意，此时我没有使用钩子。

import React from 'react';
    
    class GridSample extends React.Component {
      constructor() {
        super();
        this.state = {
          clicked: false,
        };
        this.handleOnedit = this.handleOnedit.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
        this.handleUpdate = this.handleUpdate.bind(this);
      }
      handleOnedit = (event) => {
        const par = event.target.parentNode;
        const suppar = par.parentNode;
        suppar.setAttribute('contenteditable', true);
        suppar.focus();
        this.setState({ clicked: true });
      };
    
      handleOndelete() {
        alert('this is delete button');
      }
    
      handleCancel() {
        window.location.replace(false);
      }
    
      handleUpdate() {
        this.setState({
          clicked: false,
        });
      }
    
      render() {
        console.clear();
        return (
          <div>
            <table>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
                <th>Action</th>
              </tr>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
                <td>
                  {!this.state.clicked ? (
                    <input type="button" value="Edit" onClick={this.handleOnedit} />
                  ) : (
                    <input
                      type="button"
                      value="Update"
                      onClick={this.handleUpdate}
                    />
                  )}
                  {this.state.clicked ? (
                    <input
                      type="button"
                      value="Cancel"
                      onClick={this.handleCancel}
                    />
                  ) : (
                    <input
                      type="button"
                      value="Delete"
                      onClick={this.handleOndelete}
                    />
                  )}
                </td>
              </tr>
              <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
                <td>
                  {!this.state.clicked ? (
                    <input type="button" value="Edit" onClick={this.handleOnedit} />
                  ) : (
                    <input
                      type="button"
                      value="Update"
                      onClick={this.handleUpdate}
                    />
                  )}
                  {this.state.clicked ? (
                    <input
                      type="button"
                      value="Cancel"
                      onClick={this.handleCancel}
                    />
                  ) : (
                    <input
                      type="button"
                      value="Delete"
                      onClick={this.handleOndelete}
                    />
                  )}
                </td>
              </tr>
              <tr>
                <td>John</td>
                <td>Doe</td>
                <td>80</td>
                <td>
                  {!this.state.clicked ? (
                    <input type="button" value="Edit" onClick={this.handleOnedit} />
                  ) : (
                    <input
                      type="button"
                      value="Update"
                      onClick={this.handleUpdate}
                    />
                  )}
                  {this.state.clicked ? (
                    <input
                      type="button"
                      value="Cancel"
                      onClick={this.handleCancel}
                    />
                  ) : (
                    <input
                      type="button"
                      value="Delete"
                      onClick={this.handleOndelete}
                    />
                  )}
                </td>
              </tr>
            </table>
          </div>
        );
      }
    }
    
    export default GridSample;

标签： javascriptreactjs

Answer 1

您应该尝试将索引作为参数传递并对其进行测试，而不是将值更改为您的 state.clicked 的 true 或 false（我添加了一个指向使用您的 calss 的沙箱的链接

import React from "react";

class GridSample extends React.Component {
  constructor() {
    super();
    this.state = {
      clicked: NaN,
      items: [
        { Firstname: "Jack", Lastname: "Ali", Age: 25 },
        { Firstname: "Adam", Lastname: "Alan", Age: 55 }
      ]
    };
    this.handleOnedit = this.handleOnedit.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.handleUpdate = this.handleUpdate.bind(this);
  }
  handleOnedit = (event, i) => {
    const par = event.target.parentNode;
    const suppar = par.parentNode;
    suppar.setAttribute("contenteditable", true);
    suppar.focus();
    this.setState({ ...this.state, clicked: i });
  };

  handleOndelete() {
    alert("this is delete button");
  }

  handleCancel() {
    window.location.replace(false);
  }

  handleUpdate(event, i) {
    this.setState({ ...this.state, clicked: i });
  }

  render() {
    console.clear();
    return (
      <div>
        <table>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
            <th>Action</th>
          </tr>
          {this.state.items.map((e, i) => {
            return (
              <tr key={i}>
                <td>{e.Firstname}</td>
                <td>{e.Lastname}</td>
                <td>{e.Age}</td>
                <td>
                  {!this.state.clicked === i ? (
                    <input
                      type="button"
                      value="Edit"
                      onClick={(event) => this.handleOnedit(event, i)}
                    />
                  ) : (
                    <input
                      type="button"
                      value="Update"
                      onClick={(event) => this.handleUpdate(event, i)}
                    />
                  )}
                  {this.state.clicked === i ? (
                    <input
                      type="button"
                      value="Cancel"
                      onClick={(event) => this.handleCancel(event, i)}
                    />
                  ) : (
                    <input
                      type="button"
                      value="Delete"
                      onClick={(event) => this.handleOndelete(event, i)}
                    />
                  )}
                </td>
              </tr>
            );
          })}
        </table>
      </div>
    );
  }
}

export default GridSample;

这是示例：https ://codesandbox.io/s/react-class-forked-ze3o9?file=/index.js