使用 react-hook-form 在 React 中编写另一个输入字段时重置一个输入字段答案

【问题标题】：Reset an input field when another one is written in React with react-hook-form使用 react-hook-form 在 React 中编写另一个输入字段时重置一个输入字段
【发布时间】：2022-01-11 17:33:45
【问题描述】：

具有以下组件：

import { yupResolver } from '@hookform/resolvers/yup';
import { useForm } from 'react-hook-form';
import * as yup from 'yup';

import { Input, TabsGroup, Button } from './ui-components';

import { usePostFrequency } from '../hooks/use-post-frequency';

const schema = yup.object().shape({
  second: yup.number(),
  minute: yup.number(),
  triggerName: yup.string().required()
});

export function FrequencySetter() {
  const [isEditMode, setEditMode] = useToggle(false);
  const emptyTrigger = {
    second: null,
    minute: null,
    triggerName: ''
  };

  const { handleSubmit, register, reset } = useForm({
    resolver: yupResolver(schema)
  });
  const { mutate: postFrequency } = usePostFrequency();

  const handleCancel = () => {
    setEditMode();
    reset(emptyTrigger);
  };

  const handleSubmitClick = handleSubmit((data) => {
    setEditMode();
    postFrequency(data);
  });

  const frequencyTabs = [
    {
      name: 'per second',
      children:
        <div>
          <Input inputId='second' type='number' {...register('second')} />
        </div>

    },
    {
      name: 'per minute',
      children:
        <div>
          <Input inputId='minute' {...register('minute')} />
        </div>

    }
  ];

  return (
    <div>
      <Input inputId='trigger-name' label='triggerName' {...register('triggerName')} />
      <TabsGroup tabs={frequencyTabs} />
      <Button title='cancel' onClick={handleCancel} />
      <Button title='submit' onClick={handleSubmitClick} />
    </div>
  );
}

export default FrequencySetter;

它必须做什么：

有一个名为 triggerName 的字段和另外两个字段 second 和 minute
第一个是字符串，是必需的
秒和分钟是数字字段

导入的组件 TabsGroup 有一个选项卡功能 - 它有 2 个选项卡，它在一个选项卡上显示秒的输入，在另一个选项卡上显示分钟的输入。

组件使用react-hook-form进行验证，有2个按钮，取消和提交，原因很明显。

问题：提交的数据应该包含触发器名称和秒或分钟之一，而不是两者。我不知道该怎么做 - 当我在另一个的输入中引入数据时，以某种方式重置一个的值。

有没有办法做到这一点？

【问题讨论】：

TabsGroup 是否支持 onTabClick 之类的一些道具，或者在单击其中一个选项卡时触发的任何其他道具
不，它只显示一个输入或另一个输入。但我认为无论如何这与问题无关。我们就说当一个输入被写入时，另一个必须被删除

标签： javascript reactjs typescript react-hooks react-hook-form

【解决方案1】：

您可以在second 和minute 两个字段上使用watch，并在另一个字段上使用useEffect 到setValue。

export function FrequencySetter() {

  //other code

  const { handleSubmit, register, reset, watch, setValue } = useForm({
    resolver: yupResolver(schema)
  });

  const second = watch("second");
  const minute = watch("minute");

  useEffect(() => {
    if (!!second) {
      setValue('minute', '')
    }
  }, [second]);

  useEffect(() => {
    if (!!minute) {
      setValue('second', '')
    }
  }, [minute]);

  //other code
}

【讨论】：