javascript - React Hooks 模态传递状态？

Question

所以我正在开发一个 React 应用程序，但我有点生疏，因为我花了一些时间学习其他东西。它最终将连接到 API，但现在我只在前端工作。

无论如何，我有一个使用react-bootstrap的模式。这是模式(现在是一个简单的“更新”表单)。

import React from "react";
import { useState } from "react";
import axios from "axios";
import Modal from "react-bootstrap/Modal";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";

const SensorModalForm = props => {
  const [name, setName] = useState(props.name);
  const [device, setDevice] = useState(props.device);

  return (
    <Modal show={props.show} onHide={props.handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Edit Form</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form onSubmit={props.handleSubmit}>
          <Form.Group controlId="formBasicName">
            <Form.Label>Device Name</Form.Label>
            <Form.Control
              type="text"
              value={name}
              onChange={e => setName(e.target.value)}
            />
            <Form.Text className="text-muted">
              We'll never share your email with anyone else.
            </Form.Text>
          </Form.Group>
          <Form.Group controlId="formBasicDevice">
            <Form.Label>Device Type</Form.Label>
            <Form.Control
              type="text"
              value={device}
              onChange={e => setDevice(e.target.value)}
            />
          </Form.Group>
          <Button variant="primary" onClick={props.handleSave}>
            Save Changes
          </Button>
          <Button variant="secondary" onClick={props.handleClose}>
            Close
          </Button>
        </Form>
      </Modal.Body>
      <Modal.Footer>text</Modal.Footer>
    </Modal>
  );
};

export default SensorModalForm;

这是非常基本的，这也是我第一次使用 React hooks(我实际上只是为此改编了一个示例)。

调用此功能的“卡”组件位于此处(它是表组件的一部分，该组件具有当前所有传感器的状态)。这是卡片组件:

/* eslint-disable */
import React, { useState } from "react";
import SensorModalForm from './SensorModalForm'
import { Link } from "react-router-dom";
import Button from "react-bootstrap/Button";


const SensorCard = ({ props, sensor, toggleSensor }) => {
  const [show, setShow] = useState(false);

  const handleSave = () => {
    setShow(false)
    console.log("Submitted")
  }
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  if (sensor) {
    const { id, name, device, temp, humidity, active } = sensor;
    return (
      <tr>
        <td>{id}</td>
        <td>{name}</td>
        <td>{device}</td>
        <td>{temp}</td>
        <td>{humidity}</td>
        <td>{active ? "True" : "False"}</td>
        <td>
          <Link
            to={{
              pathname: `/devices/${id}`,
              state: { sensor: sensor }
            }}
            className="btn btn-info btn-sm"
          >
            View
          </Link>
          <SensorModalForm device={device} name={name} handleClose={handleClose} handleSave={handleSave} show={show}/>
          <Button variant="info" size="sm" onClick={handleShow}>
            Edit
          </Button>
          <Button variant="info" size="sm" data-id={id} onClick={toggleSensor}>
            Toggle Active
          </Button>
        </td>
      </tr>
    );
  }
};

export default SensorCard;

我遇到的问题是，一旦提交/保存模式，我想使用新的更新值进行 axios PUT/PATCH 调用(react-bootstrap 是我获得 setShow Hook 等...来自)。但是我不太确定如何传递这些值？

我觉得这是我“嵌套”太远的情况之一，使用 redux 会更好......但这是一个简单的应用程序，如果我能解决的话，我真的不想强制 redux这个小问题。我对此很生疏，所以我认为我明显遗漏了一些东西，但本质上我想在 SensorCard 内的 handleSave 回调上调用 axios PUT 请求.

这可能吗？我觉得我可以直接调用 e.target.name.value 或者这是不好的做法？

Answer 1

在模态代码中，您必须通过调用 save 方法来传递要保存的值，如下所示:

<Button variant="primary" onClick={() => props.handleSave(name, device)}>

在您的 SensorCard 中，您的函数签名应该包含这些参数

const handleSave = (name, device) => {
  // Your implementation
}