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

Question

我在调用函数时遇到问题。该函数位于 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 函数，该函数将其值发送到状态。根据这个值验证信号将出现。 （我的意思是如果条件返回false，红色边框会出现，或者输入警告）

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 上调用。它应该检查 state 的值是否满足条件。如果条件返回false，您将无法提交此表单，因此不会添加警报。但是如果条件返回 true ，我想调用我作为道具发送的那个函数。

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');
}

根据我上次使用该控制台日志的尝试，我认为我只是没有正确调用此函数。对于这么长的问题和代码示例，我很抱歉，但我想确保每个人都能明白我在说什么。谢谢:)

Answer 1

<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>

  )

}