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会更好的例子之一……但这是一个简单的应用程序，真的，如果我能解决的话，我真的不想强制redux这个小问题。我对此感到非常生锈，因此我认为我显然缺少一些东西，但是从本质上来说，我想在PUT内的handleSave回调上调用axios SensorCard请求。

这可能吗？我觉得我可以打电话给e.target.name.value还是不好的做法？

Answer 1

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

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

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

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

反应钩模态传递状态？

1 个答案: