如何解决如何在不同组件中调用函数
我在调用函数时遇到问题。此功能位于主 App.js 文件中,并作为道具传递给其他组件。如果表单验证返回true,但我的代码不起作用,则需要调用此函数。
App.js中的功能
function getAlarm() {
let message = document.getElementById("text").value;
let hour = document.getElementById("hours").value;
let minute = document.getElementById("minutes").value;
//Add id to alarm
let id;
if(time.alarms.length > 0 ){
id = Math.max(...time.alarms.map((alarm) => alarm.id)) + 1
}else{
id = 1;
}
//Create new alarm object
const newAlarm = {
id: id,message: message,hour: hour,minute: minute
};
作为道具传递到组件
<SetAlarm getInfo={getAlarm} />
在此组件中,我几乎没有表格,但有一些验证。为了更好地理解,我还将向您展示表单和这些功能。
表格
<form onSubmit={validateForm}>
<FontAwesomeIcon
icon={faTimesCircle}
className="closeIcon"
onClick={() => setAlarm(false)} />
<h3>Please set your alarm</h3>
<label htmlFor="text">Message</label>
<input type="text" id="text" autoComplete="off" autoFocus="on" />
<div className="flex">
<div className="inputNumber">
<label htmlFor="hours">Hour</label>
<input type="number" id="hours" value={validate.hours} onChange={updateHours} />
<div id="errHours"></div>
</div>
<div className="inputNumber">
<label htmlFor="minutes">Minute</label>
<input type="number" id="minutes" onChange={updateMinutes} />
<div id="errMinutes"></div>
</div>
</div>
<button onClick={validateForm}>SET ALARM</button>
</form>
输入元素具有 onChange 函数,该函数会将其值发送给状态。根据此值,将显示验证信号。 (我的意思是如果条件返回假,则红色边框会出现,或在输入下显示警告)
const [validate,setValidate] = useState({
message:'',hours:'',minutes:''
})
function updateHours(e){
let value = e.target.value;
let hours = document.getElementById('hours');
let errHours = document.getElementById('errHours');
setValidate(prevState => ({
...prevState,hours:value
}))
if(Number(hours.value) > 23){
hours.style.border='1.5px solid red';
errHours.innerHTML='<span>Please enter 1-23</span>'
}else{
hours.style.border='1px solid grey'
errHours.innerHTML='';
}
}
function updateMinutes(e){
let value = e.target.value;
let minutes = document.getElementById('minutes');
let errMinutes = document.getElementById('errMinutes');
setValidate(prevState => ({
...prevState,minutes:value
}))
if(Number(minutes.value) > 59){
minutes.style.border='1.5px solid red';
errMinutes.innerHTML='<span>Please enter 1-59</span>';
}else{
minutes.style.border='1.5px solid grey';
errMinutes.innerHTML='';
}
}
最后是 validateForm()函数。如您所见,它在 onSubmit 表单上被调用。应该检查状态值是否满足条件。如果条件返回false,则您将无法提交此表单,因此不会添加任何警报。但是,如果condition返回true,我想调用那个我以sendind作为道具的函数。
function validateForm(e){
e.preventDefault();
if(Number(validate.hours) > 23 || Number(validate.hours) < 1){
return;
}
if(Number(validate.minutes) > 59 || Number(validate.minutes) < 1){
return;
}
//This is not working. If all conditions returns true,nothing happens.
return () => props.getInfo;
//I tried it like this too
// return props.getInfo();
//Or like this;
//return props.getInfo;
//To be sure it's working I've tried simple console log and it's working
//return console.log('hello');
}
根据我上次对该控制台日志的尝试,我认为我只是没有正确调用此函数。很抱歉有这么长的问题和代码示例,但是我想确保每个人都能得到我在说什么。谢谢:)
解决方法
<SetAlarm getInfo={getAlarm} />
在SetAlarm组件中
const SetAlarm = ({getInfo}) => {
const validateForm = () => {
getInfo(); // Do whatever you like to do with this
}
return (
<form onSubmit={validateForm}>
<label htmlFor="text">Message</label>
<input type="text" id="text" autoComplete="off" autoFocus="on" />
<button type="submit">SET ALARM</button>
</form>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。