Кнопка реакции не может иметь две функции стрелок? - PullRequest
Новая
       9

Кнопка реакции не может иметь две функции стрелок?

0 голосов
/ 09 января 2020

Я пытаюсь создать кнопку, которая отображает модальный bootstrap с формой и заполнить ее данными элемента, по которому вы щелкнули (Приложение позволяет перечислять, добавлять, удалять и редактировать элементы). Проблема в том, что работает только вторая функция стрелки в событии 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>
            </>
        )
    }

1 Ответ

1 голос
/ 09 января 2020

Не следует использовать состояние в функциональном компоненте, вместо этого использовать хуки, а затем составить две функции 

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>
    </>
  );
}
...