如何在不同组件中调用函数

问题描述

我在调用函数时遇到问题。此功能位于主 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>

  )

}