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

你可以把你的函数变成每次都更新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 认为的不良做法，我更喜欢柯里方法。

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