在使用自定义钩子时将自定义输入传递道具反应到父功能组件

Question

我是新手，我有一个自定义输入，我通过自定义钩子处理值和输入处理程序，但想使用自定义输入将值和输入处理程序获取到父组件，但我坚持如何实现这一点。 我已经编写了以下代码。

在自定义挂钩上

import {useReducer} from "react";

const INITAL_STATE  = {value:'',valid:false,pristine:true,  error:''}
const REDUCER_ACTIONS = { input:"INPUT", blur:"BLUR"}

const reducer = (state,action)=>{
 
  if (action.type === REDUCER_ACTIONS.input){
    return {...state, value: action.value}
  }
  
  if (action.type === REDUCER_ACTIONS.blur){
     return {...state, pristine: false}
   }
 
  return INITAL_STATE;
 }

const useForm = () => {
   const [inputState, dispatch] = useReducer(reducer,INITAL_STATE)

   const onBlurHandler = (event) => {
     dispatch({type:REDUCER_ACTIONS.blur});
   }

 const onInputHandler = (event) => {
     dispatch({type:REDUCER_ACTIONS.input,value:event.target.value})
 }

return {
    ...inputState,
    onBlurHandler,
    onInputHandler
 }
};
export default useForm;

对于我的自定义输入，我有

import useForm from "../../hooks/use-form";
const CustomInput = (props) => {
   const {value, onInputHandler, onBlurHandler} = useForm(); //uses custom hook

    return  <>
         <label htmlFor={props.id}>{props.label}</label>
         <input value={value} onBlur={onBlurHandler} onInput={onInputHandler} 
   {...props} />
        </>
}
export default CustomInput;

上面的自定义输入具有指向自定义钩子的 onInput 和 onBlur，因为我想在其他输入类型（如 select 和日期选择器）上重用该功能，而不必复制它们。

在我的父组件上，我只是调用自定义输入，例如

 function App() {

    
    
    return (
      <div className="container">
          <CustomInput onInputHandler={} label="First name"/>
      </div>
   );
  }

export default App;

我想将 onInputHandler 和值作为道具从自定义输入传递回父组件，但我坚持如何做到这一点。 我该如何进行？

Answer 1

当您说需要传递值时，我猜您想将输入的初始值传递给 CustomInput。 为此，您可以传递另一个道具。

1. App.js 将initialValue传递给CustomInput

<CustomInput
    initialValue={"abc"}
    label="First name"
/>

2. 在CustomInput中，将initialValue属性作为参数传递给useForm挂钩。

const { value, onInputHandler, onBlurHandler } = useForm(props.initialValue); 

3. 将initialValue设置为 useForm 中初始useForm中的value 。

const useForm = (initialValue) => {
  const [inputState, dispatch] = useReducer(reducer, {
    ...INITAL_STATE,
    value: initialValue
  });
  ...
  ...
}

要将onInputHandler作为道具传递，您可以检查onInputHandler是否可作为道具使用，并将其与来自onInputHandler的useForm一起调用。

1. 在 App.js 中定义了另一个接受event作为参数的 function。

export default function App() {
  const onInputHandler = (e) => {
    console.log(e);
  };

  return (
    <div className="App">
      <CustomInput
        ...
        onInputHandler={onInputHandler}
        label="First name"
      />
    </div>
  );
}

2. 在CustomInput中更改 onInput 处理程序，如下所示。 您可以根据需要更改逻辑（我在useForm和prop中调用了 onInputHandler ）。

      <input
        value={value}
        onBlur={onBlurHandler}
        onInput={(e) => {
          props.onInputHandler && props.onInputHandler(e);
          onInputHandler(e);
        }}
        {...props}
      />

Answer 2

我的方法是简单地从hooks中调用onInputHandler() onInputHandler()从从 Parent 接收的props中调用 onInputHandler() 并将e.target.value作为道具发送到这些函数。

    const CustomInput = (props) => {
      const { value, onInputHandler, onBlurHandler } = useForm(); //uses custom hook

      console.log(value);

      const handleInputChange = (e: any) => {
        onInputHandler(e);
        props.onInputHandler(e.target.value);
      };

      return (
        <>
          <label htmlFor={props.id}>{props.label}</label>
          <input
            value={value}
            onBlur={onBlurHandler}
            onInput={(e) => {
              handleInputChange(e);
            }}
            {...props}
          />
        </>
      );
    };
    export default CustomInput;

在父组件中，我们可以将它们作为从 function 返回的props接收并根据我们的要求使用它。

    function App() {
      
        return (
          <div className="container">
          <CustomInput
            label="name"
            onInputHandler={(value: string) => console.log("App",value)}
          />
          </div>
       );
      }
    
    export default App;

沙盒链接： https://codesandbox.io/s/nifty-lamport-2czb8?file=/src/App.tsx:228-339