标签: react-final-form

A custom React component I use inside a react-final-form <Field> has a value prop of int?. Its value can either be an integer or null. But when I set a null initial value for this field component's value using the initialValues prop of the <Form> component, react-final-form converts the null to an empty string ''.

I know I can easily work around this by creating a wrapper component that checks for '' and converts it to null, …

我正在尝试在子组件中使用带有 DropDown 的 React-final-form。无法让这个工作。

我所有的文本字段都已经在子组件中，这就像一个魅力。父级中的字段如下所示：

<Field
    name="lastName"
    placeholder="Last Name"
    validate={required}
>
    {({input, meta, placeholder}) => (
        <MyField meta={meta} input={input} placeholder={placeholder}/>
    )}
</Field>

子组件如下所示：

export const MyField = (props) => {
    return (
        <Form.Field className={props.meta.active ? 'active' : ''}>
            <Label>{props.label ? props.label : props.placeholder}</Label>
            <Form.Input
                {...props.input}
                placeholder={props.placeholder}
                className={(props.meta.error && props.meta.touched ? 'error' : '')}
            />
        </Form.Field>
    )
};

“Form.Field” 和 “Label” 来自Semantic-ui-react

但现在我想用 DropDown 做同样的事情。标准 DropDown，取自 React-Final-Form 站点上的示例，如下所示：

<Field name="toppingsA" component="select">
    <option value="chicken">Chicken</option>
    <option value="ham">Ham</option>
    <option value="mushrooms">Mushrooms</option>
    <option …

我从事的项目需要将redux-form升级为react-final-form。我只是想知道该任务是否有任何文档。

一旦表单的字段被验证，提交不会触发重新运行验证。有没有办法在提交表单时触发重新运行验证？

我有一个表单字段，如果未在特定时间范围内提交，其值可能会无效。这不是异步的；我只是想介绍一个场景，在这种情况下，用户有一段时间没有点击提交，当他们最终点击提交时，该值将变得无效。最终表单会记住值更改后立即发生的验证结果，这意味着无论验证和提交之间经过多长时间，未更改的值仍然有效。这是我想要挂钩和改变的行为；在我的用例中，中间时间很重要。我曾尝试使用包中的beforeSubmit侦听器，final-form-submit-listener但它只提供对FormApi对象的访问权限。我尝试使用pauseValidation和resumeValidation函数FormApi但他们无法实现我想要的，或者我没有正确使用它们。我有一种感觉，如何做到这一点非常明显，但我无法弄清楚。

我创建了这个沙箱来演示我的意思。

谢谢！

更新：一些附加信息：

• 这是一个时间选择器。如果您选择今天的时间，您可以选择从现在起 15 分钟后的时间。它现在有效，因为它现在是未来。如果您在接下来的 20 分钟内没有触摸表单然后单击提交，则应阻止提交，因为您选择的时间现在是过去 5 分钟。
• 我考虑过直接在提交处理程序中添加验证。这里有两个答案可以做到这一点。但是，它对我来说并不理想，因为 Final Form 不会收到错误并将它们传递给meta表单字段的对象。我的代码库很复杂并且严重依赖meta对象来显示错误消息。尝试在提交处理程序中复制该功能可能会起作用，但它很笨拙，并且违反了整个代码库中使用的约定。

我正在尝试学习如何使用 React-Final-Form （简称 RFF）。

我已经学会了如何使用<Field>组件，但现在我需要添加一个自定义组件来使用 RFF 未提供的所见即所得编辑器。

所以，我选择了react-draft-wysiwyg。

好的，首先这是我的表格：

const FormComponent = () => {

  const handleSubmitOnClick = () => ({
    news_title,
    news_subtitle,
    editor_content, 
    image_url,
  }) => {

    const data = {
      "user": {
        news_title: news_title,
        news_subtitle: news_subtitle,
        editor_content: editor_content <- here the content from the WYSIWYG editor
        image_url: image_url 
      }
    }

     // API call here .... 
  }

  return (
    <>
      <h1>News Main Page</h1>

      <Form 
        onSubmit={handleSubmitOnClick()}
      >
        {
          ({ 
            handleSubmit, 
            values, 
            submitting,
          }) => (
          <form onSubmit={handleSubmit} data-testid="form"> …

有没有办法同时重置表单并设置状态？我尝试了下面的代码，但它似乎不起作用。任何意见都将受到赞赏。

<Form
    onSubmit={this.onSubmit}
    render={({handleSubmit, form, submitting, pristine, values}) => (
        <form onSubmit={handleSubmit}>
.
.
.
.

<button
    type="button"
    onClick={() => {
        form.reset;
        this.setState({"reset": true});
    }}
    disabled={submitting || pristine}
>
    Reset
</button>
</form>

我在react-final-form表单上有两个选择字段。选择字段具有下拉列表中显示的“选项”列表。我想做的是确保第二个下拉列表中的可用选项被第一个下拉列表中选择的项目“减少”。

因此，这需要第二个下拉列表知道在第一个下拉列表中选择的值。这是我要实现的概念：

const fruitOptions = ['apple', 'orange', 'banana', 'grapes'];
<Field
  name = "morningTea"
  component = {SelectField}
  label = "Fruit for Morning Tea"
  options = {fruitOptions}
/>
<Field
  name = "afternoonTea"
  component = {SelectField}
  label = "Fruit for Afternoon Tea"
  options = {_.without(fruitOptions, morningTea)}
/>

但是我看不到一种方法来访问表单上的其他字段值。鉴于“ fruitOptions”列表不是其自身的字段。

我们正在使用 React Final Form 库，并希望更改用户选择的嵌套字段的值。

它基本上是地址形式，在选择 时Suburb，我想更改postcode和state。address 又是一个嵌套的表单对象。我的数据集看起来像：-

{
  name: 'xyzx',
  address: {
    suburb: 'xx',
  },
}

我正在通过以下 mutator

export const changeValueMutator: Mutator = ([name]: string[], state: MutableState, { changeValue }: Tools) => {
  console.log(state, name);
  changeValue(state, name, value => (value));
};

并将其称为

this.props.changeValue('address.suburb', item.suburb);

我使用创建了一个表单react-final-form。自动对焦无法正常工作。我知道的唯一解决方案是使用refReact的功能。我可以使用react-final-form库自动调整输入的焦点吗？

import React from "react";
import { render } from "react-dom";
import { Form, Field } from "react-final-form";

const App = () => (
  <Form
    render={({}) => (
      <form>
        <Field name="company" component="input" autofocus />
      </form>
    )}
  />
);

render(<App />, document.getElementById("root"));

我react-final-form在 React App 中使用。它工作得很好！

但是有什么方法可以防止react-final-form用户成功提交表单后重置表单的输入值。

我需要它的原因是，目前当用户在提交表单后被重定向时，用户会看到200-400 micro second在提交表单和重定向到其他组件的操作之间输入值被重置为初始表单值。

我尝试使用以下但没有奏效：

e.preventDefault();

返回假；

以下是处理表单提交的函数。

export const useCreateAgent = (
  onCompleted: () => void,
) => {
  const [createAgent] = useMutation(CREATE_AGENT, {
    onCompleted,
  });

  return useCallback(async (agent: IAgent) => {
    try {
      await createAgent(createVariables({ ...agent }));
    } catch (errors) {
      return errors;
    }
  }, [createAgent]);
}