在使用自定义钩子时，响应自定义输入将道具传递给父函数组件

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和date选择器)上重用这些功能，而不必重复它们。

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

 function App() {

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

export default App;

我希望将onInputHandler和value作为道具从自定义输入传递回父组件，但仍然停留在如何做到这一点上。我该怎么做？

Answer 1

当您说需要传递值时，我猜您希望将输入的初始值传递给CustomInput。为了达到这个目的，你可以通过另一个道具。

将CustomInput传递给

1. App.js initialValue

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

1. In CustomInput，将initialValue螺旋桨传递给useForm钩子作为论据。

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

在useForm.中，

1. 将initialValue设置为初始状态的value

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

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

1. In App.js定义了另一个接受event作为参数的函数。

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

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

1. In CustomInput将onInput处理程序更改如下。您可以根据需要更改逻辑(我在prop).

和useForm中调用了onInputHandler

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

​

​

Answer 2

我的方法是简单地从hooks调用hooks，从从父函数接收的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;

在父组件中，我们可以在从该函数返回的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