如何在 reactjs 中使用重构清理表单?

Question

提交表单后，我想清理它，但此解决方案似乎不起作用。 这是我的提交处理程序：

handleSubmit: ({ title, body }, props) => e => {
e.preventDefault()
props
.handleCreatePost({
variables: {
title,
body
}
})
.then(() => {
return {
title: "",
body: ""
}
})
.catch(err => console.log(err))
}

Answer 1

每次您需要从组件内部更改道具时，都必须使用withStateHandlers.

compose(
withStateHandlers(
({title, body})=> ({title, body}), //set the state from parent props
{ 
setTitle: () => title => ({title}), // update the title
setBody: () => body => ({body}), // update the body
clearProps: () => () => ({titel:'', body: ''}) // create a handler to reset the values
}
),
withHandlers({
handleSubmit: ({ title, body, clearProps }, props) => e => {
e.preventDefault()
props
.handleCreatePost({
variables: {
title,
body
}
})
.then(clearProps) // reset the values 
.catch(err => console.log(err))
}
)
)