1

我正在尝试在输入中使用 redux 存储状态值，但我有一个自定义的 useInput 钩子，我不知道如何让它们一起工作。

我构建了一个反应自定义 useInput 钩子来处理值和更改/模糊事件。像这样使用：

const {
    value: titleValue,
    error: titleError,
    inputChangedHandler: titleChangedHandler,
    inputBlurHandler: titleBlurHandler,
    setValue: setTitleValue,
  } = useInput(validateTitle);

<input
   error={titleError ?? false}
   id="title"
   name="title"
   type="text"
   placeholder="Stream Title"
   autoComplete="off"
   value={titleValue}
   onChange={titleChangedHandler}
   onBlur={titleBlurHandler}
/>

我的问题是，如果我想在“编辑”组件中使用它，我想从现有状态中获取初始值，我不能这样做，因为输入值绑定到 useInput 值属性。

所以我不能用我的 useInput 自定义钩子来做到这一点：

const selectedItem = useSelector((state) => state.items.selectedItem);

<input
       error={titleError ?? false}
       id="title"
       name="title"
       type="text"
       placeholder="Stream Title"
       autoComplete="off"
       value={selectedItem.title} <-- use the state selectedItem value 
       onChange={titleChangedHandler}
       onBlur={titleBlurHandler}
    />

我的 useInput 客户挂钩只负责验证输入值。如果我最初可以将值设置为存储值，它会很好用，但是我的组件正在使用 useEffect 调用 API getById(id) 所以第一次加载组件时仍然没有 selectedItem，所以我不能最初设置 useInput到 selectedItem.title。

这是我的 useInput 自定义挂钩代码：

import { useState } from 'react';

const useInput = (validate) => {
  console.log('in useInput');
  const [value, setValue] = useState('');
  const [isTouched, setIsTouched] = useState(false);

  const validationResult = validate(value);
  const error = !validationResult.isValid && isTouched && validationResult.message;

  const inputChangedHandler = (event) => {
    setIsTouched(true);
    setValue(event.target.value);
  };

  const inputBlurHandler = () => {
    setIsTouched(true);
  };

  return { value, error, inputChangedHandler, inputBlurHandler, setValue };
};

export default useInput;

我该如何解决？

4

0 回答 0