禁用提交按钮，直到收到来自服务器的react-final-form格式的应答

，可以通过以下步骤实现：

在前端开发中，使用react-final-form库来处理表单提交和验证。react-final-form是一个强大的表单处理库，可以帮助我们管理表单状态、验证输入以及处理提交等操作。
在表单组件中，可以使用react-final-form提供的<Form>组件来包裹整个表单，并使用<Field>组件来定义表单字段。例如，可以使用<Field>组件来定义一个输入框字段：

<Field name="username" component="input" type="text" placeholder="Username" />

在提交按钮上添加一个disabled属性，初始值为true，表示按钮禁用状态。

<button type="submit" disabled={true}>提交</button>

在表单组件中，可以使用react-final-form提供的onSubmit回调函数来处理表单提交事件。在该回调函数中，可以发送表单数据到服务器，并等待服务器的响应。

const onSubmit = async (values) => {
  // 发送表单数据到服务器
  const response = await fetch('服务器地址', {
    method: 'POST',
    body: JSON.stringify(values),
    headers: {
      'Content-Type': 'application/json'
    }
  });

  // 解析服务器的响应
  const data = await response.json();

  // 根据服务器的响应结果来更新提交按钮的禁用状态
  if (data.success) {
    // 服务器返回成功响应，将提交按钮设置为可用状态
    setSubmitButtonDisabled(false);
  } else {
    // 服务器返回失败响应，保持提交按钮禁用状态
    setSubmitButtonDisabled(true);
  }
};

在表单组件中，可以使用react-final-form提供的form对象来获取表单的当前状态。可以通过form.getState().valid来判断表单是否通过了验证。

const { form } = useForm();

// 根据表单的验证状态来更新提交按钮的禁用状态
const setSubmitButtonDisabled = (disabled) => {
  form.mutators.setSubmitButtonDisabled(disabled);
};

在表单组件中，可以使用react-final-form提供的mutators来自定义表单的状态更新。可以通过form.mutators来访问mutators对象，并使用mutators.setSubmitButtonDisabled来更新提交按钮的禁用状态。

const setSubmitButtonDisabled = (disabled) => {
  form.mutators.setSubmitButtonDisabled(disabled);
};

// 注册自定义的mutator
useEffect(() => {
  form.mutators.setSubmitButtonDisabled = (disabled) => {
    form.change('submitButtonDisabled', disabled);
  };
}, [form]);

最后，在提交按钮的disabled属性中，使用表单的状态来动态设置禁用状态。

<button type="submit" disabled={form.getState().valid || form.getState().submitting || form.getState().values.submitButtonDisabled}>提交</button>

通过以上步骤，我们可以实现禁用提交按钮，直到收到来自服务器的react-final-form格式的应答。在表单提交时，按钮会被禁用，直到服务器返回响应并根据响应结果来更新按钮的禁用状态。这样可以确保用户在提交表单后不会重复提交，同时提供了良好的用户体验。

禁用提交按钮，直到收到来自服务器的react-final-form格式的应答

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐