向/从Modal传递变量

Question

我实现了一个Modal，它在我的应用程序中使用了一个自定义Hook，它应该作为WiFi网络的登录掩码。到目前为止，Modal正在工作，我也已经设法将所选SSID的名称传递给它。然而，我正在努力从启动模态的其他组件中获取变量。

Modal.js:

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

const Modal = ({ isShowing, connect, ssid, hide }) => 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>
<label>
<form onSubmit={connect}>
<input
id="password"
name="Password"
type="password"
value={"password"}
/>
<button type="submit">Connect</button>
</form>
</label>
</div>
</div>
</div>
</React.Fragment>, document.getElementById("modal")
) : null;
export default Modal;

useModal.js:

import { useState } from 'react';
const useModal = () => {
const [isShowing, setIsShowing] = useState(false);
const [password, setPassword] = useState("password");
function toggle() {
setPassword("HOW");
setIsShowing(!isShowing);
}
return {
password,
isShowing,
}
};
export default useModal;

Settings.js:

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();
};
/*
function connectWifi(password) {
console.log("Aktuelles Passwort: ", 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;

上面的代码已经包含了一些我尝试过的东西。如前所述，将SSID传递到模态工作，但我不知道如何将密码返回到Settings.js以处理那里的数据。

如果有人能给我指出正确的方向，我会很高兴的。

Answer 1

为了从子组件中获取一个变量，你可以将你想要获取的变量作为父组件的状态:

const [yourVariable, setYourVariable] = useState('')

然后将setYourVariable作为道具传递给你的模态。这样，你就可以在模态组件内部设置youVariable，并通过这种方式获得它的值:

// inside modal component 
setYoutVariable(...)

Answer 2

我刚才无意中看到了另一篇文章，似乎使用无状态组件作为我的模型会导致死胡同。为了从表单中提取数据，必须将其转换为有状态组件。