标签: react-final-form

Redux-form "Field"组件提供onChange属性.每当从基础输入触发onChange事件时将调用的回调.此回调允许为Field获取"newValue"和"previousValue".

React-final-form "Field"组件没有此属性.

那么,我如何才能获得相同的功能？

如何在 react-final-form 中设置更改 onSubmit 的值类型。

inteface IValues {
    name: string;
}
<Form onSubmit={(values: IValues) => {}}>   // Error happens here
//    Types of parameters 'values' and 'values' are incompatible.
//    Type '{}' is missing the following properties from type 'IFormValues': name

这有效，但我无法获得 value.name

<Form onSubmit={(values: object) => {
    // Property 'name' does not exist on type 'object'
    values.name
}}>

我可以按如下方式转换为 IValues 以提取名称。

<Form onSubmit={(values: object) => {
    const { name } = values as IValues;
}}>

onSubmit 来自 Config，我尝试查找如何设置 FormData …

我正在尝试向我的论坛添加日期选择器。问题是日期选择器只能通过组件状态工作。意味着选择的值进入状态。

我正在尝试强制最终表单字段使用该状态值。但我似乎无法弄清楚。

基本上试图做到这一点：

<Field name="field1" value={this.state.date}/>

我无法将我的下一个领域集中在最终形式和本机和功能组件上。关于这种情况，大约有 0 个文档。

<Field
  component={TextField}
  name="title"
  returnKeyType={"next"}
  blurOnSubmit={false}
  onSubmitEditing={() => {
    _descriptionFieldRef.current.focus();
  }}
/>

我正在使用自定义组件react-final-form。输入更改时，它将值设置为字段address。但是当清除输入时，它不会更新字段的值。所以我试图用形式变异器来做到这一点。

我已经添加了一个用于清除字段的修改器：

mutators={{
  clear: ([address], state, { changeValue }) => {
    changeValue(state, "address", () => undefined);
  }
}}

我尝试将其添加到我的自定义 onChange 函数中，但它不起作用。

onChange={event =>
  props.input.onChange !== undefined
    ? props.input.onChange({ value: event })
    : form.mutators.clear
}

或者也许这根本不需要变异器就可以完成？我将衷心感谢您的帮助。这是一个实例（清除该字段仅适用于单击按钮 as onClick={form.mutators.clear}）。

下面是典型的 material-ui 步进器。

  export default function HorizontalLinearStepper() {
    const classes = useStyles();
    const [activeStep, setActiveStep] = React.useState(0);
    const [skipped, setSkipped] = React.useState(new Set());
    const steps = getSteps();

    const isStepOptional = step => {
        return step === 1;
    };

    const isStepSkipped = step => {
        return skipped.has(step);
    };

    const handleNext = () => {
    let newSkipped = skipped;
    if (isStepSkipped(activeStep)) {
        newSkipped = new Set(newSkipped.values());
        newSkipped.delete(activeStep);
    }

    setActiveStep(prevActiveStep => prevActiveStep + 1);
    setSkipped(newSkipped);
};

const handleBack = () => {
    setActiveStep(prevActiveStep …

我的代码正在运行，但收到​​警告：

警告：从 React Final Form v3.3.0 开始，props.mutators 已被弃用，并将在 React Final Form 的下一个主要版本中删除。使用： props.form.mutators 代替。检查您的 ReactFinalForm 渲染道具。

以这个例子：

https://codesandbox.io/s/kx8qv67nk5

   return   <Form
            onSubmit={() => console.log('ok')}
            mutators={{
                ...arrayMutators
            }}
            initialValues={ {customers: [{firstName: 'a', lastName: 'b'}]} }
            render={({
                         handleSubmit,
                         mutators: { push, pop }, // injected from final-form-arrays above
                         pristine,
                         reset,
                         submitting,
                         values
                     }) => {
                return (
                    <form onSubmit={handleSubmit}>
                        <div className="buttons">
                            <button
                                type="button"
                                onClick={() => push('customers', undefined)}>
                                Add Customer
                            </button>
                        </div>
                        <FieldArray name="customers">
                            {({ fields }) =>
                                fields.map((name, index) => (
                                    <div key={name}> …

我有一个使用最终表单数组的表单。表单有效且验证有效，但是，当我在组件内进行状态更改时，它会重置我的所有值。

我能够使用react-final-form-arrays提供的相同示例复制该问题：

https://codesandbox.io/embed/react-final-form-field-arrays-om6p6

我添加了一个按钮来切换状态更改。本质上，只需尝试在表单中填充值，然后更改状态即可。表格将重置，我不明白为什么会出现这种情况。如果我删除初始值，这种情况就不会发生。

有谁知道为什么会这样？

我对反应最终形式有问题，它在 3 秒后重置值并恢复到初始值...花了 3 天进行调试，但没有任何变化...这是代码...任何想法和信息都会受到影响，谢谢

const ChoiceQuestionFrom = ({ editMode = true, onSubmit = () => {}}) => {
  const handleValidations = (values) => {
    let errors = {};
    if(!values.question){
        errors.question = "Question Required !"
    }
    return errors;
}
  return (
    <Form
      onSubmit={(values) => {
        return onSubmit(values);
      }}
      render={_ChoiceQuestionFrom}
      editMode={editMode}
      initialValues={{
        type: "question",
        qType: "pollMultiChoice",
        question: "",
        answers: [{ answer: "", isCorrect: false }],
      }}
      validate={handleValidations}
    />
  );
};

const _ChoiceQuestionFrom = (props) => {
  const {
    editMode,
    values,
    submitting, …

我在react-final-form中使用react-datepicker。我正在使用具有多个步骤的模板https://codesandbox.io/s/km2n35kq3v?file=/index.js。问题是我无法将日期选择器集成到组件内。我的代码如下所示：

    return (

        <Field name={props.name} parse={() => true}>
            {props => (
                <DatePicker
                    locale="de"
                    placeholderText="Datum eingeben"
                    selected={startDate}
                    dateFormat="P"
                    openToDate={new Date()}
                    minDate={new Date()}
                    disabledKeyboardNavigation
                    name={props.name}
                    value={startDate}
                    onChange={(date) => setStartDate(date)}
                />
            )}
        </Field>

    );

有谁知道我如何使用它以便数据在表单末尾传递？

此致