React组件通信求助：如何从Modal向Settings.js回传WiFi密码

核心思路 #

将Modal中的密码输入通过表单提交事件传递给父组件的回调函数，让Modal负责临时管理输入状态，提交时把密码传递给Settings的处理函数完成后续逻辑。

步骤1：修改Modal组件，处理表单提交并传递密码 #

更新Modal.js，实现受控输入框并在表单提交时传递密码：

import React, { useState } from 'react';
import { createPortal } from 'react-dom';

const Modal = ({ isShowing, connect, ssid, hide }) => {
  // 用useState管理输入框值，实现受控组件
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认跳转行为
    connect(password); // 将密码传给父组件的处理函数
    hide(); // 提交后关闭Modal
  };

  return isShowing ? createPortal(
    <React.Fragment>
      <div className="modal-overlay" />
      <div className="modal-wrapper" aria-modal aria-hidden tabIndex={-1} role="dialog">
        <div className="modal">
          <div className="modal-header">
            <button type="button" className="modal-close-button" data-dismiss="modal" aria-label="Close" onClick={hide}>
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div className="modal-body">
            <p>Connect to: {ssid}</p>
            <form onSubmit={handleSubmit}>
              <input
                id="password"
                name="Password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)} // 更新输入值
                placeholder="Enter password"
              />
              <button type="submit">Connect</button>
            </form>
          </div>
        </div>
      </div>
    </React.Fragment>, document.getElementById("modal")
  ) : null;
};

export default Modal;

步骤2：简化useModal Hook，移除不必要的密码状态 #

useModal.js只负责控制Modal的显示/隐藏，无需管理密码：

import { useState } from 'react';

const useModal = () => {
  const [isShowing, setIsShowing] = useState(false);

  function toggle() {
    setIsShowing(!isShowing);
  }

  return {
    isShowing,
    toggle
  };
};

export default useModal;

步骤3：完善Settings组件中的connectWifi函数 #

启用Settings.js中注释的connectWifi函数，接收密码并处理WiFi连接逻辑：

import React from "react";
import { useState, useEffect } from "react";
import Modal from "../../components/Modal";
import useModal from "../../components/useModal";

const electron = window.require('electron');
const { ipcRenderer } = electron;

const Settings = ({ reqReload }) => {
  const [wifiList, setWifiList] = useState([{ id: "", ssid: 'No Networks available' }]);
  const [ssidSelected, setSsidSelected] = useState("127.0.0.1");
  const { isShowing, toggle } = useModal();

  const updateWifi = (event, args) => {
    setWifiList(args);
  };

  function openDialogue(ssid) {
    setSsidSelected(ssid);
    toggle();
  };

  // 处理密码接收和WiFi连接逻辑
  function connectWifi(password) {
    console.log("Selected SSID: ", ssidSelected);
    console.log("Entered Password: ", password);
    // 这里添加实际连接逻辑，比如通过ipcRenderer发送给主进程
    // ipcRenderer.send('connect-wifi', { ssid: ssidSelected, password });
    toggle();
  }

  useEffect(() => {
    ipcRenderer.send('updateWifi');
    ipcRenderer.on('wifi_list', updateWifi);

    return function cleanup() {
      ipcRenderer.removeListener('wifi_list', updateWifi);
    };
  }, []);

  return (
    <div className="settings">
      <Modal
        isShowing={isShowing}
        connect={connectWifi}
        ssid={ssidSelected}
        hide={toggle}
      />
      <div className="settings__header">
        <h2></h2>
      </div>
      <div className="settings__body">
        <div className="settings__connections">
          <div className="settings__connections__wifi">
            <p><i>Available Wifi-Networks:</i></p>
            <div className="settings__connections__wifi__list">
              {wifiList.map((item, i) => (
                <div className="settings__connections__wifi__list__item" key={i}>
                  <button className="selectNetworkButton" type="button" onClick={() => openDialogue(item.ssid)}>{item.ssid}</button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
};

export default Settings;

关键说明 #

• 受控组件：Modal中的密码输入框通过useState实现受控，确保输入值能被实时捕获。
• 回调传递：通过connect props将父组件的connectWifi函数传入Modal，提交时将密码作为参数传递。
• 状态职责分离：useModal仅负责Modal的显示状态，密码由Modal临时管理，最终传递给父组件处理核心业务逻辑。

内容的提问来源于stack exchange，提问作者Traxan