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

Question

我目前正在做一个 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 道具，它就可以正常工作。但是有了输入道具，它会延迟输入。没有输入道具，我无法从表单中获取值。

有什么办法可以解决这个时间延迟吗？

提前致谢。

Answer 1

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

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

Answer 2

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

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

我们可以这样做

有一个视频 link。 Video

希望这对您有所帮助

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

React-Final-Form delays in taking input with render props in Field

reactjs

redux

react-redux

final-form

react-final-form