我正在尝试使一个可重用的表单组件连接到Book的“新建”和“更新”实例。我是用JS完成的,但在将其移至打字稿时遇到了问题。这是父组件的代码:
class NewBook extends Component {
onSubmit = formValues => {
// Redux action call
await this.props.saveBook(formValues);
}
render(){
return(
<div>
<BookForm onSubmit={onSubmit} />
</div>
);
}
}
这是表格:
class BookForm extends Component {
onSubmit = formValues => {
this.props.onSubmit(formValues);
}
renderInput = () => {
// Renders the inputs
}
render(){
return (
<form onSubmit={this.props.handleSubmit(onSubmit)}>
<Field id="name" component={this.renderInput} label="name" />
<Field id="author" component={this.renderInput} label="author" />
<button>Send</button>
</form>
);
}
}
我想防止表单处理任何操作,因此我想将表单数据发送回父级,然后由父级处理该操作。我遇到的问题是onSubmit
函数和formValues
。如何从父组件接收并使用onSubmit函数? formValues
的类型是什么?