一个反应按钮不能具有两个箭头功能吗？

Question

我正在尝试创建一个按钮，该按钮显示带有表单的引导程序模式，并用单击的元素的数据填充它（该应用程序允许您列出，添加，删除和编辑元素）。问题在于onclick事件中只有第二个箭头功能起作用。我试图将它们放在一种功能中，但我仍然无法弄清楚。所以这是代码，我仍然是一个反应的初学者，希望您能对此有所帮助。

editButton(celldata) {

        const [show, setShow] = useState(false);

        const handleClose = () => setShow(false);
        const handleShow = () => setShow(true);

        return (
            <>
            <button
                type="button"
                onClick={() => this.setState({ cellName: celldata.celldata.cell, case: celldata.celldata.case, comments: celldata.celldata.comments }), handleShow}
                className="btn btn-outline-dark">
                    <Edit/>
            </button>
            {console.log(this.state.case, show)}
            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                <Modal.Title>Edit Cell</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form>
                        <Form.Group>
                            <Form.Label>Cell</Form.Label>
                            <Form.Control value={this.state.cellName} onChange={(e) => this.cellNameHandler(e)} style={{textAlign: 'left'}} placeholder="Cell Name" />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Use Case</Form.Label>
                            <Form.Control value={this.state.case} onChange={(e) => this.caseHandler(e)} as="select">
                                {
                                    use_cases.use_cases.map((u) =>
                                        <option>
                                            {u}
                                        </option>
                                    )
                                }
                            </Form.Control>
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Comments</Form.Label>
                            <Form.Control value={this.state.comments} onChange={(e) => this.commentsHandler(e)} style={{textAlign: 'left'}} as="textarea" rows="3" />
                        </Form.Group>
                        <Button variant="secondary" onClick={handleClose}>
                            Cancel
                        </Button>
                        <Button variant="primary" onClick={() => { this.handleSave() }}>
                            Add
                        </Button>
                    </Form>
                </Modal.Body>
            </Modal>
            </>
        )
    }

Answer 1

您不应在功能组件中使用状态，而应使用钩子，然后组成两个函数

function editButton(celldata) {
  const [show, setShow] = useState(false);
  const [selectedData, setSelectedData] = useState({});

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const handleSelect = () => {
    setSelectedData({
      cellName: celldata.celldata.cell,
      case: celldata.celldata.case,
      comments: celldata.celldata.comments
    });
  };
  const handleButtonClick = () => {
    handleSelect();
    handleShow();
  };
  return (
    <>
      <button
        type="button"
        onClick={handleButtonClickhandleButtonClick}
        className="btn btn-outline-dark"
      >
        <Edit />
      </button>
      {console.log(selectedData.case, show)}
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Edit Cell</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group>
              <Form.Label>Cell</Form.Label>
              <Form.Control
                value={selectedData.cellName}
                onChange={e => this.cellNameHandler(e)}
                style={{ textAlign: 'left' }}
                placeholder="Cell Name"
              />
            </Form.Group>
            <Form.Group>
              <Form.Label>Use Case</Form.Label>
              <Form.Control
                value={selectedData.case}
                onChange={e => this.caseHandler(e)}
                as="select"
              >
                {use_cases.use_cases.map(u => (
                  <option>{u}</option>
                ))}
              </Form.Control>
            </Form.Group>
            <Form.Group>
              <Form.Label>Comments</Form.Label>
              <Form.Control
                value={selectedData.comments}
                onChange={e => this.commentsHandler(e)}
                style={{ textAlign: 'left' }}
                as="textarea"
                rows="3"
              />
            </Form.Group>
            <Button variant="secondary" onClick={handleClose}>
              Cancel
            </Button>
            <Button
              variant="primary"
              onClick={() => {
                this.handleSave();
              }}
            >
              Add
            </Button>
          </Form>
        </Modal.Body>
      </Modal>
    </>
  );
}