反應：我們可以將 2 forms 從 2 個不同的子組件傳遞給父組件，並使用父組件內的按鈕提交它們嗎？

Question

我試圖以某種方式將來自 2 forms 和 2 個不同組件的數據傳遞給父組件，然后以某種方式使用父組件內的按鈕控制台記錄所有這些數據。 然后我將簡單地將這些數據發送到 JSON 文件或虛擬數據庫。

當我按下提交按鈕時，當然現在什么都沒有觸發，因為我根本不知道如何將 function 從孩子傳遞給父母。 我嘗試了很多方法，但如果您能告訴我一種提升 state 並結合 forms 的方法，我將不勝感激。 對於輸入，為了傳遞 refs，我使用了 React.forwardRef()

很容易只有 1 個大組件和 1 個表單，然后是這個組件內的按鈕，但由於這是一個有趣的項目，我想學習如何實現這個功能，以防我將來使用它。 您可以在此鏈接上找到屏幕截圖：

[][1]： https://i.stack.imgur.com/myV0N.jpg

這里我們 go：

1.父組件

const BookingComponent = () => {
  return (
    <div>
      <CRContainer className="booking-crcontainer">
        <CRColumn>
          <PickUpCarComponent />
        </CRColumn>
        <CRColumn>
          <CustomerInfo />
        </CRColumn>
      </CRContainer>
      <CRContainer className="booking">
        <Button type="submit" btnText="hello there" />
      </CRContainer>
    </div>
  );
};

export default BookingComponent;

2. 孩子 1

const CustomerInfo = (props) => {
  const firstlRef = useRef();
  const lastNameRef = useRef();

  const onTrigger = (e) => {
    e.preventDefault();
    //console.log(first1Ref.current.value)
    console.log("heaheaheah");
  };

  return (
    <>
      <Subtitle stitle={SubtitleLabels.customerInfo} />
      <div className="customer-info-container">
        <form onSubmit={onTrigger}>
          <div>
            <LabeledInput
              labelText={CustomerInfoLabels.firstName}
              type="text"
              inputPlaceholder={GeneralLabels.placeholder}
              ref={firstlRef}
            ></LabeledInput>
            <LabeledInput
              labelText={CustomerInfoLabels.lastName}
              type="text"
              inputPlaceholder={GeneralLabels.placeholder}
              ref={lastNameRef}
            ></LabeledInput>
          </div> ...................

3. 孩子 2

還沒有把 refs 放在這里。

const PickUpCarComponent = () => {
  return (
    <div>
      <Subtitle stitle={SubtitleLabels.pickUp} />
      <form>
      <div className="booking-inner-container">
        <div>
          <LabeledInput labelText={"Pick-up date*"} type="date"></LabeledInput>
          <LabeledInput labelText={"Pick-up time*"} type="time"></LabeledInput>
        </div>
        <DropDown type="CarGroup" labeltext="Car Group*" attribute="name" />
        <DropDown type="RentalOffice" labeltext="Region*" attribute="region" />
      </div>
     </form>
    </div>
  );
};

export default PickUpCarComponent;

4.輸入組件

const LabeledInput = React.forwardRef((props, ref) => {
  const { labelText, type, inputPlaceholder, onChange, className } = props;

  return (
    <div className={`input-container ${className}`}>
      <label htmlFor="labelText">{labelText}</label>
      <input
        type={type}
        placeholder={inputPlaceholder}
        onChange={onChange}
        ref={ref}
      />
    </div>
  );
});

export default LabeledInput;

Answer 1

您可以使用上下文將表單處理程序傳遞給子組件，然后在子組件中您可以使用上下文並獲取父表單的值和處理程序並使用它們。

 const FormContext = React.createContext({});
     
    
        const BookingComponent = () => {
         const [values, setValues] = useState();
         const handleChange = (e) => {
             //handle child event in parent and save child state in parent to use later in submit button
         }
          return (
          <FormContext.Provider value={{handleChange}}> 
            <div>
              <CRContainer className="booking-crcontainer">
                <CRColumn>
                  <PickUpCarComponent />
                </CRColumn>
                <CRColumn>
                  <CustomerInfo />
                </CRColumn>
              </CRContainer>
              <CRContainer className="booking">
                <Button type="submit" btnText="hello there" />
              </CRContainer>
            </div>
          </FormContext.Provider>
          );
        };
        
        export default BookingComponent;


const LabeledInput = (props) => {
  const formContext = useContext(FormContext);
  const { labelText, type, inputPlaceholder, onChange, className } = props;

  return (
    <div className={`input-container ${className}`}>
      <label htmlFor="labelText">{labelText}</label>
      <input
        type={type}
        placeholder={inputPlaceholder}
        onChange={formContext.handleChange}
        ref={ref}
      />
    </div>
  );
});