标签: final-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-array拥有许多“与会者”。我希望每个Attendee.Email输入都进行Web查找，然后根据结果设置Attendee.FirstName和Attendee.Surname。

我不确定应该如何用final-form-calculate装饰器表达这一点。具体来说，我不知道如何引用数组中的单个表单项。

这是我的开始：

const MyForm = props => {

  const calculator = createDecorator(
    {
      field: 'Attendees.Email', // <-- this needs to happen for each Email
      updates: {
        // ... do some lookups and set FirstName and Surname based off database query
        Attendees.FirstName: (email, allValues) =>
          someLookup(email).FirstName
      }
    },

  );

  const submit = values => {
    console.log(values);

  };
  return (<Form onSubmit={submit}
                mutators={{
                  ...arrayMutators,
                }}
                decorators={[calculator]}
                render={({handleSubmit, pristine, invalid, mutators: {push, pop}}) => {
                  return (
                    <form onSubmit={handleSubmit}> …

我使用创建了一个表单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"));

文档中写道，

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

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

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

<form>
  Are you over 18 years old?
  <button type="submit">Yes</button>
  <button type="submit">No</button>
</form>

但是，我不知道如何使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>
    );
  }
}

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

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

当前的

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

期望的行为

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

当前行为示例

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

我的调查

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