[英]How to use a react component as a function?
I'd like to open a materialui dialog and handle the result from javascript to make a simple Yes/no prompt.我想打开一个 materialui 对话框并处理来自 javascript 的结果以制作一个简单的是/否提示。
Id like it to work something like this (just mockup code to explain)我喜欢它像这样工作(只是模型代码来解释)
<MyPromptComponent />
{
MyPromptComponent.show('Do you really want to?').then((result) => alert(result ? 'then do it' : 'walk away') );
}
So the question is;所以问题是; How (if) can I put functions in my component, that I can call from a reference?
如何(如果)我可以在我的组件中放置函数,我可以从参考调用?
If someone knows of an example where something similar is dont I'd appreciate it.如果有人知道类似的例子,我会很感激。
Edit : 11/10/2020 The "problem" with the state way of doing this is that I have to leave the function showing the prompt, having to store temporary variables outside the function.编辑:11/10/2020 这样做的状态方式的“问题”是我必须让函数显示提示,而必须在函数之外存储临时变量。 If I could do something like this the code would be much more readable:
如果我可以做这样的事情,代码将更具可读性:
{
let tempData = doAProcessForThisFunctionOnly();
let sureResult = confirmDialog.show('Are you sure?');
if(sureResult )
doSomeMoreWithTempData(tempData);
else
doSomeOtherStuff(tempData);
doSomeEndStuff(tempdata);
}
In react I have to do this作为反应,我必须这样做
{
let tempData = doAProcessForThisFunctionOnly();
tempDataRef.current = tempData;
setShowDialog();
}
onYes = () => {
let workData = tempDataRef.current;
doSomeMoreWithTempData(workData );
doSomeEndStuff(workData)
}
onNo = () => {
let workData = tempDataRef.current;
doSomeOtherStuff(workData );
doSomeEndStuff(workData)
}
doSomeEndStuff = (workData) => {
//Do the stuff here
}
It really seems I need to jump in and out of a lot of functions just to get a simple confirmation and even using variables outside the functon (refs).看起来我真的需要跳进和跳出很多函数只是为了得到一个简单的确认,甚至使用函数之外的变量(参考)。 That really seems a big step backwards code-wise, to me.
对我来说,这似乎是代码明智的一大步。
The "vanilla" way of doing this would even let me use the same prompt-dialog component from many different functions.这样做的“普通”方式甚至可以让我使用来自许多不同功能的相同提示对话框组件。 In reactit seems I need a separate confirm-dialog for each case as the "yes"/"no" events are hardcoded per case.
在 reactit 中,我似乎需要为每个案例单独的确认对话框,因为每个案例都对“是”/“否”事件进行了硬编码。
You should control everything with state:你应该用状态控制一切:
export default function App() {
const [show, setShow] = useState(false);
return (
<div className="App">
<button onClick={() => setShow(true)}>Initiate</button>
<MyPromptComponent
title="Do you really want to?"
show={show}
onConfirm={() => {
setShow(false);
alert("Then do it")
}}
onCancel={() => {
setShow(false);
alert("Walk away")
}}
/>
</div>
);
}
const MyPromptComponent = ({ show, title, onConfirm, onCancel }) => {
return (
<React.Fragment>
{show &&
<div>
Lets pretend this is modal - {title}
<button onClick={() => onConfirm()}>Confirm</button>
<button onClick={() => onCancel()}>Cancel</button>
</div>
}
</React.Fragment>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.