Javascript 对通过状态作出反应？

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

无论如何，我有一个使用react引导的模式。这是模态（这是一个简单的“更新”表单）

从“React”导入React；
从“react”导入{useState}；
从“axios”导入axios；
从“反应引导/模式”导入模式；
从“react引导/表单”导入表单；
从“反应引导/按钮”导入按钮；
const SensorModalForm=props=>{
const[name，setName]=useState（props.name）；
const[device，setDevice]=使用状态（props.device）；
返回(
编辑表格
设备名
setName（e.target.value）}
/>
我们永远不会与其他人共享您的电子邮件。
设备类型
setDevice（e.target.value）}
/>
保存更改
接近
文本
);
};
导出默认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;

/*eslint禁用*/
从“React”导入React，{useState}；
从“./SensorModalForm”导入SensorModalForm
从“react router dom”导入{Link}；
从“反应引导/按钮”导入按钮；
常量传感器卡=（{props，sensor，toggleSensor}）=>{
const[show，setShow]=useState（false）；
常量handleSave=（）=>{
设置显示（假）
控制台日志（“已提交”）
}
const handleClose=（）=>setShow（false）；
常量handleShow=（）=>setShow（true）；
中频（传感器）{
常数{id，名称，设备，温度，湿度，活动}=传感器；
返回(
{id}
{name}
{device}
{temp}
{湿度}
{活动？“真”：“假”}
看法
编辑
切换激活
);
}
};
导出默认传感器卡；

我遇到的问题是，我想在提交/保存模式后使用新的更新值执行axios

PUT/PATCH

调用（react bootstrap是我从中获得

setShow

hooks等的地方）。但是，我不确定如何传递这些值

我觉得这是我“嵌套”太深的例子之一，使用redux会更好…但这是一个简单的应用程序，如果我能解决这个小问题，我真的不想强制redux。我对此非常生疏，因此我认为我显然缺少了一些东西，但本质上我想调用

传感器卡中
handleSave
回调中的axios
PUT
请求

这可能吗？我觉得我可以直接调用
e.target.name.value
或者这是一种不好的做法吗？
在模式代码中，必须通过如下方式调用save方法来传递要保存的值：

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

我觉得你把一堆东西混在一起了。让我们一次考虑一件事。您想在
handleSave
中发出http请求。这很有道理。那就这么做吧。下一个问题是什么？你不需要重做。。。无论做什么。。。。redux是一个很好的库，但它没有魔力。你可以用react做任何你可以用redux和react redux做的事情。再说一次，它仍然有用，只是从来都不需要。这比我所做的（引用e.target表单值）简单得多。这也起了作用…但不确定哪一个更好。您的onChange事件已经在用e.target.value更新您的状态变量；因此，您的状态将始终具有输入的最新更新值。这就是为什么在调用（）=>handleSave（名称、设备）时，参数就是您所在状态中的参数：）
<Button variant="primary" onClick={() => props.handleSave(name, device)}>

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