React-Final-Form, как передать реквизит 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

Вы можете каррировать свою функцию, чтобы location обновлялся каждый раз.

Метод каррирования: (предпочтительно для линтеров)

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 проп.Он будет создавать новую функцию при каждом повторном рендеринге, но поскольку встроенные функции являются плохой практикой , которые считаются линтерами, я предпочитаю метод каррирования.

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

Answer 2

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

Оберните это в анонимную функцию, которая однажды вызывала, вызывает вашу функцию с требуемым параметром, который в данном случае будет location.

После этого у функции будет дополнительный аргумент:

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