如何在React-Admin V4中设置USESTATE上的输入值？

发布于 2025-01-30 01:06:11 字数 1431 浏览 3 评论 0原文

我正在反应admin v4中移动。在我的v3（3.19.11）中，我有一个文本输入，其初始值等于状态。默认情况下，此状态是一个空字符串，当我完成其他一些字段时，它已更新，并且文本输入的值也是如此。

在V4中，InitialValue不再存在，被DefaultValue替换，但似乎并没有以相同的方式工作。我想知道是否有一种简单的方法可以做与V3相同的事情，而无需使用useform/usecontroller创建自定义表单。

我试图用文本输入，文本字段和本机输入来做到这一点。我的问题是，我没有更新输入值，或者已更新，但输入未以表格提交。

我的V3中的代码示例：

const [channelName, setChannelName] = useState<string>('');
const [partnerName, setPartnerName] = useState<string>('');
const [campaignName, setCampaignName] = useState<string>('');

useEffect(() => {
    const fillCampaignName = () => {
      const campaignValues: string[] = [];

      campaignValues.push(channelName, partnerName);

      const campaignValuesString = campaignValues
        .filter((item) => item !== '')
        .join('_');

      setCampaignName(campaignValuesString);
    };

    fillCampaignName();
  }, [channelName, partnerName]);

<Create {...props}>
  <SimpleForm>
    <AutocompleteInput variant="standard" source="channel" choices={channels} onChange={(channel: string) => setChannelName(channel)} />
    <AutocompleteInput variant="standard" source="partner" choices={partners} onChange={(partner: string) => setPartnerName(partner)} />
    <TextInput disabled source="name" variant="standard" label="Campaign name" initialValue={campaignName} />
  </SimpleForm>
</Create>

感谢您的帮助。

原文

I'm moving in react-admin v4.
In my v3 (3.19.11), I have a TextInput with an initialValue equals to state.
By default this state is an empty string and when I complete some other fields, it's updated and the value of the TextInput too.

In v4 initialValue doesn't exist anymore and is replaced by defaultValue but it seems that doesn't work the same way.
I would like to know if there is a simple way to do the same thing than v3 without to create a custom form with useForm/useController.

I tried to do that with a TextInput, a TextField and a native input.
My issue is that either I don't have the input value updated, or it's updated but the input is not submitted in the form.

Code example in my v3 :

const [channelName, setChannelName] = useState<string>('');
const [partnerName, setPartnerName] = useState<string>('');
const [campaignName, setCampaignName] = useState<string>('');

useEffect(() => {
    const fillCampaignName = () => {
      const campaignValues: string[] = [];

      campaignValues.push(channelName, partnerName);

      const campaignValuesString = campaignValues
        .filter((item) => item !== '')
        .join('_');

      setCampaignName(campaignValuesString);
    };

    fillCampaignName();
  }, [channelName, partnerName]);

<Create {...props}>
  <SimpleForm>
    <AutocompleteInput variant="standard" source="channel" choices={channels} onChange={(channel: string) => setChannelName(channel)} />
    <AutocompleteInput variant="standard" source="partner" choices={partners} onChange={(partner: string) => setPartnerName(partner)} />
    <TextInput disabled source="name" variant="standard" label="Campaign name" initialValue={campaignName} />
  </SimpleForm>
</Create>

Thanks for your help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江挽川 2025-02-06 01:06:11

您是否尝试过使用DefaultValue而不是initialValue？

https：//marmelab.com/react-act-admin/upgrade.html-upgrade.html#inputs

回复收藏 0 原文

別甾虛僞 2025-02-06 01:06:11

使用UseFormContext，然后您可以通过编程设置设置Value。

import { useFormContext } from 'react-hook-form';

const MyForm = (props) => {
  const { setValue } = useFormContext();
  useEffect(() => {
    setValue('date', props.date)
    }, [props.date])
  }

  return (
    <DateTimeInput source="date"/>
  )
}

Use useFormContext then you can setValue programatically.

import { useFormContext } from 'react-hook-form';

const MyForm = (props) => {
  const { setValue } = useFormContext();
  useEffect(() => {
    setValue('date', props.date)
    }, [props.date])
  }

  return (
    <DateTimeInput source="date"/>
  )
}

回复收藏 0 原文

~没有更多了~