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道具。它会在每次重新渲染时创建新功能，但是由于内联函数被linters认为是 不良做法 ，因此我更喜欢使用currying方法。

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

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

2 个答案: