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是一个将使用表单值调用的函数

因此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

1 个答案: