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

【问题标题】：Pass input values with React-Final-Form to Axios POST使用 React-Final-Form 将输入值传递给 Axios POST
【发布时间】：2019-08-14 17:24:42
【问题描述】：

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

在表单提交时，我想将 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...

【问题讨论】：

标签： reactjs axios react-final-form

【解决方案1】：

你应该看看documentation

onSubmit 是一个函数，将使用表单的值调用

所以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))
}

【讨论】：

谢谢奥利维尔。我真是个白痴。我确实从 handleClickSignIn 检索了值，但是因为我打开了错误的控制台窗口，所以我看不到响应。