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

Question

我在调用函数时遇到问题。这个函数在主App.js文件中，它作为 prop 传递给不同的组件。如果表单验证返回 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    }))

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>

  )

}