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钩子(我只是在某种程度上改编了一个例子)。

调用它的“卡片”组件在这里(它是表组件的一部分，该组件当前具有所有传感器的状态)。这是卡片组件：

/* 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钩子的地方，等等……来自)。但是，我不太确定如何才能传递这些值？

我觉得这是我“嵌套”太多的实例之一，使用redux将是better...but这是一个简单的应用程序，如果我能解决这个小问题，我真的不想强迫redux。我对此相当生疏，所以我认为我明显遗漏了一些东西，但本质上我想在SensorCard内的handleSave回调上调用axios PUT请求。

这个是可能的吗？我觉得我可以直接打电话给e.target.name.value，这是不是很糟糕的做法？

Answer 1

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

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

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

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