标签: react-final-form

React Final Form 重新渲染所有字段,同时更改其中之一

文档中写道,

<Field/>每当其订阅的字段状态发生变化时,都会重新渲染。

因此,如果我有多个字段,则所有字段都将重新渲染,同时仅更改其中之一。有没有什么方法可以防止重新渲染目前未更改的其他字段?

final-form react-final-form

2
推荐指数
1
解决办法
5793
查看次数

在react-final-form中是否有任何函数可以获取表单值

请帮助理解react-final-form的api文档,

我们已经将 redux-form 迁移到了 react-final-form。在我的应用程序中,我们使用 formvalueselector api 来获取表单值。请帮助获得react-final-form中更苗条的api

https://redux-form.com/8.3.0/docs/api/formvalueselector.md/

需求是通过属性名称获取表单值

reactjs react-final-form react-admin

2
推荐指数
1
解决办法
9839
查看次数

react-final-form 状态不包含空输入

当用户从输入中删除内容时,我希望在状态中有空/空属性。

如果您在示例中看到,当用户清除输入时,状态为空。我使用状态来更新数据库上的数据,因此当代码用新数据更新旧数据时,值不会更新(没有属性!)。

示例:https : //codesandbox.io/s/3qvqnv6216

我找不到任何明智的方法将财产留在州内。

谢谢 :)

reactjs react-final-form

1
推荐指数
1
解决办法
1074
查看次数

如何使用带有react-final-form的多个提交按钮?

我想使用带有多个提交按钮的react-final-form构建一个表单,其中每个提交按钮在表单中设置不同的值。本质上,我想创建一个在呈现的HTML中看起来像这样的表单:

<form>
  Are you over 18 years old?
  <button type="submit">Yes</button>
  <button type="submit">No</button>
</form>
Run Code Online (Sandbox Code Playgroud)

但是,我不知道如何使react-final-form将这些不同的提交按钮视为表单中的设置值。我尝试将组件状态,<input type="hidden">onClick处理程序合并,如下所示:

class FormWithMultipleSubmits extends React.Component {
  state = {
    value: undefined
  };

  setValue = value => this.setState({ value: value });

  render() {
    return (
      <Form>
        Are you over 18 years old?
        <Field
          name="adult"
          component="input"
          type="hidden"
          value={this.state.value}
        />
        <button type="submit" onClick={() => this.setValue(true)}>
          Yes
        </button>
        <button type="submit" onClick={() => this.setValue(false)}>
          No
        </button>
      </Form>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

然而,这似乎并没有工作-这可能是因为value该物业<Field> …

final-form react-final-form

1
推荐指数
1
解决办法
2105
查看次数

将 React Dropzone 与 React Final Form 一起使用

试图弄清楚如何一起使用这两个组件。github 上有一个问题,人们参考它来启动并运行它,但我无法弄清楚。其要点是这样的:

<Field name={`logo`}>
  {(fieldprops) => (
    <div>
      <label>Logo</label>
      <Dropzone 
        onDrop={(files, e) => {
          props.change(`logo`, files);
          props.blur(`logo`);
        }}
      />
      <pre>{JSON.stringify(fieldprops, 0, 2)}</pre>
    </div>
  )}
</Field>
Run Code Online (Sandbox Code Playgroud)

使用确切的代码对我来说会抛出错误:TypeError: children is not a function

我在代码沙盒上设置了一个使用挂钩和文件预览的简化测试用例。我还尝试查看文档中的自定义输入,但似乎缺少一些东西才能正常工作。如果有人能指出我正确的方向,我会非常高兴。

reactjs react-dropzone react-final-form react-hooks

1
推荐指数
1
解决办法
4259
查看次数

是的,使用正则表达式和不区分大小写的验证

我有一个密码重置表单,其中对新密码的验证是这样的,它应该与正则表达式匹配并且不应该与用户的 userId 匹配。userId 检查必须不区分大小写。

我尝试了小写方法,但随后正则表达式验证失败,因为在验证开始之前该值已转换为小写。

  newPassword: yup
        .string()
        .notOneOf(
          [yup.ref("oldPassword")],
          "New password must be different than current password."
        )
        .matches(REGEX_PASSWORD, "Password does not meet requirements.")
        .lowercase()
        .notOneOf(
          [userId.toLowerCase()],
          "New password must not be same as userId"
        )

Run Code Online (Sandbox Code Playgroud)

是否有任何方法可用于转换仅用于 userId 检查的值,以便我可以执行不区分大小写的检查而不必担心正则表达式失败。

javascript reactjs yup react-final-form

1
推荐指数
1
解决办法
5765
查看次数

在 React Final Form 中提交成功后如何将表单设置为“原始”

作为一名开发人员,我想在用户使用 React Final Form 成功提交表单时禁用“提交”按钮,并在用户在表单中输入一些新文本时启用“提交”按钮。

当前的

该变量仅在第一次加载表单时pristine将禁用属性设置为true,但是当用户提交表单(而不是重新加载页面)时,该变量pristinefalse并且我希望它是为了true禁用“提交”按钮。

期望的行为

  • 首次加载表单时,“提交”按钮将被禁用。
  • 当用户输入文本或进行更改时,将启用“提交”按钮。
  • 用户单击“提交”并成功后,“提交”按钮将被禁用。
  • 如果用户在提交后输入更多更改,则应启用“提交”按钮。

当前行为示例

https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/simple

我的调查

我尝试使用最终表格提供的以下变量的组合,但结果不成功pristine,,,,touchedsubmitSucceededlastSubmittedValues

javascript forms reactjs final-form react-final-form

1
推荐指数
1
解决办法
5115
查看次数

当设置了 `multiple` 时,出现错误 Dropdown `value` 必须是一个数组。接收类型:`[object String]`

使用multiselectwith时出现此错误final-form

设置value时下拉菜单必须是一个数组multiple。接收类型:[object String]

这是我的代码:

https://codesandbox.io/s/cool-torvalds-lhe9d

<Dropdown
        {...props.input}
        clearable
        fluid
        multiple
        search
        onChange={(e, data) => {
          return data.value.length > 0
            ? input.onChange(data.value)
            : input.onChange("");
        }}
        onSearchChange={onSearchChange}
        selection
        defaultValue={[]}
        options={data}
        placeholder="Select values"
      />
Run Code Online (Sandbox Code Playgroud)

任何更新?

javascript reactjs semantic-ui-react react-final-form

0
推荐指数
1
解决办法
1948
查看次数