React-Final-Form 如何将 props location.search 传递给函数

Question

最近几天我一直在使用 React-Final-Form，但遇到了很多问题。

在我的主要功能 PasswordReset 中，我需要获取道具 'location.search' 并将其传递给自定义 'handleSubmitOnClick' 以便处理提交时的结果。

这里是主要功能：

const handleSubmitOnClick = ({ // I need the location.search to be passed here as prop
  password,
  password_confirmation,
}) => {

  const url = 'http://localhost:3000/api/v1/users/passwords';

  const headers = {
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    }
  }

  const data = {
    "user": {
      "reset_password_token": location.search,
      "password": password,
      "password_confirmation": password_confirmation,
    }
  }

  axios.post(url, data, headers)
  .then(response => console.log(response))
  .catch(error => console.log('error', error)))
}

const PasswordReset = ({
  location //<==== I need to pass this to 'handleSubmitOnClick' function
}) => 
  <Fragment>
    <h1>Password Reset page</h1>

    <Form 
      onSubmit={handleSubmitOnClick}
      decorators={[focusOnError]}
    >
      {
        ({ 
          handleSubmit, 
          values, 
          submitting,
        }) => (
        <form onSubmit={handleSubmit}>         

          <Field 
            name='password'
            placeholder='Password'
            validate={required}
          >
            {({ input, meta, placeholder }) => (
              <div className={meta.active ? 'active' : ''}>
                <label>{placeholder}</label>
                <input {...input} 
                  type='password' 
                  placeholder={placeholder} 
                  className="signup-field-input"

                />
                {meta.error && meta.touched && <span className="invalid">{meta.error}</span>}
                {meta.valid && meta.dirty && <span className="valid">Great!</span>}
              </div>
            )}
          </Field>

          <Field 
            name='password_confirmation'
            placeholder='Confirm password'
            validate={required}
          >
            {({ input, meta, placeholder }) => (
              <div className={meta.active ? 'active' : ''}>
                <label>{placeholder}</label>
                <input {...input} 
                  type='password' 
                  placeholder={placeholder} 
                  className="signup-field-input"

                />
                {meta.error && meta.touched && <span className="invalid">{meta.error}</span>}
                {meta.valid && meta.dirty && <span className="valid">Great!</span>}
              </div>
            )}
          </Field>

          <button 
            type="submit"
            className="signup-button"
            disabled={submitting}
          >
            Submit
          </button>
        </form>
      )}
    </Form>
  </Fragment>

export default PasswordReset;

非常感谢任何帮助。一个糟糕的答案总比没有答案好。提前致谢。

Answer 1

<Form 
  onSubmit={() => handleSubmitOnClick(location)}
  decorators={[focusOnError]}
>

将其包装在一个匿名函数中，该函数一旦被调用，就会使用所需的参数调用您的函数，在本例中为 location。

之后函数会有一个额外的参数：

handleSubmitOnClick = location => ({..props})

Answer 2

您可以柯里化您的函数 location 每次都更新。

柯里化方法：（linter 首选）

const handleSubmitOnClick = (location) => ({ //location would come from PasswordReset every time there's a re-render
                             ^^^^^^^^
  password,
  password_confirmation,
}) => {
   ...
}

const PasswordReset = ({
  location //<==== I need to pass this to 'handleSubmitOnClick' function
}) => 
  <Fragment>
    <h1>Password Reset page</h1>

    <Form 
      onSubmit={handleSubmitOnClick(location)} // <--- This will update location on every re-render
      decorators={[focusOnError]}
    >
      { ... }
    </Form>
  </Fragment>

export default PasswordReset;

内联函数方法：

或者您可以使用提供的其他答案，但您仍然需要更新您的 handleSubmitOnClick 函数以接受您的 location 道具。它会在每次重新渲染时创建新函数，但是因为内联函数是 不好的做法 被 linters 认为我更喜欢 currying 方法。

   <Form 
      onSubmit={() => handleSubmitOnClick(location)} // <--- This will create new function on every re-render
      decorators={[focusOnError]}
    >

React-Final-Form 如何将 props location.search 传递给函数

React-Final-Form how to pass props location.search to function

reactjs

react-final-form