使用 React-Final-Form 将输入值传递给 Axios POST

Question

我有一个登录页面。字段：用户名和密码。

在提交表单时，我想将 2 个输入值传递给一个函数，该函数将通过 Axios API.

处理 POST 调用

因为我使用的是 React-Final-Form，所以我没有看到有人使用 refs 作为输入来收集数据。 Final-Form 提供 values 作为道具，但我无法将它们传递给我的外部 handleClickSignIn 函数。

const handleClickSignIn = () => {
  axios.post(url, data, {
    headers: headers
  })
  .then(response => console.log(response))
  .catch(err => console.log(err))
}

const focusOnError = createDecorators();

const SignIn = () => 
  <Fragment>
    <h1>Sign In page</h1>

    <Form 
      onSubmit={handleClickSignIn}
      decorators={[focusOnError]}
    >
      {
        ({ 
          handleSubmit, 
          values, 
          submitting 
        }) => (
        <form onSubmit={handleSubmit}>
          <Field 
            name='email'
            placeholder='Email'
            validate={required}
          > 
            {({ input, meta, placeholder }) => (
              <div className={meta.active ? 'active' : ''}>
                <label>{placeholder}</label>
                <input {...input} 
                  type='email' 
                  placeholder={placeholder} 
                  className="signin-field-input"

                />
etc...

Answer 1

你应该看看 documentation

onSubmit is a function that will be called with the values of your form

因此 handleClickSignIn 将在其第一个参数中检索表单值

const handleClickSignIn = (values) => {
    // do what you want with the form values
    axios.post(url, values, {headers: headers})
    .then(response => console.log(response))
    .catch(err => console.log(err))
}

使用 React-Final-Form 将输入值传递给 Axios POST

Pass input values with React-Final-Form to Axios POST

reactjs

axios

react-final-form