React-Final-Form 延迟在 Field 中使用渲染道具获取输入

问题描述

我目前正在做一个 React 项目。我正在使用 react-final-form 来获取表单中的数据。当我使用 Material UI 组件创建表单时，我创建的表单有点像这样。

代码

 <Form
     onSubmit={onSubmit}
     validate={validate}
     render={({ handleSubmit,values }) => (
         <form onSubmit={handleSubmit}>
              <FormControl variant="outlined" className={classes.formControl} key={fieldKey}>
                     <Field
                        name={field.fieldName}
                        render={({ input }) => (
                           <TextField
                             {...input}
                             className={classes.textField}
                             variant="outlined"
                             label={props.field.label}
                             placeholder={props.field.description}
                             required={props.field.isMandatory}
                             InputLabelProps={{
                               shrink: true,}}
                          />
                      )}
                      type="text"
                   />
                 </FormControl>
             </form>
          )}
      />

现在，只要我从渲染道具中删除 input 道具，它就可以正常工作。但是使用输入道具，它会延迟输入。没有输入道具，我无法从表单中获取值。

有没有办法解决这个时间延迟？

提前致谢。

解决方法

如果你想要一个简单的字段。也许你可以只传递必要的道具。

<TextField
  name={input.name}
  value={input.value}
  onChange={input.onChange}
/>

,

对此的解决方案是订阅。 表单最初在每个动作上呈现，react-final-form 允许处理订阅，

<Form subscription={{handeleSubmit: true}} ...> </Form>

我们可以这样做

有一个视频链接。 Video

希望对你有帮助?