Question

我有一个像这样的高阶分量FormBuilder：

const FormBuilder = (WrappedComponent) => {
  return class HOC extends React.Component {
    clearForm() { // ... }

    render() {
      return (
        <Form onSubmit={//what do I say here?!}>
           <Form.Input placeholder='Name' name='name' />
           <WrappedComponent clearForm={this.clearForm} />
        <Form>
      );
    }
  }
}

这是WrappedComponent NewPizzaForm：

class WrappedComponent extends React.Component {
  onSubmit() { // sends a POST request to the backend, then this.props.clearForm() }

  render() {
     return (
       <Form.Button>Add Pizza</Form.Button>
     );
  }
}

const NewPizzaForm = FormBuilder(WrappedComponent);

export default NewPizzaForm;

因此，我想将onSubmit函数作为道具从WrappedComponent发送到FormBuilder，以便在提交表单时可以调用它。我决定在onSubmit中定义WrappedComponent函数的原因是因为我还有另一个具有WrappedComponent函数的FormBuilder（使用onSubmit），但是它发送PATCH请求而不是POST请求。我该如何实现？

Answer 1

通常，如果要更改任何内容或将任何内容从子组件传递到父组件，则应使用Cache entry information key: https://www.some-site.com/ fetch count: 2 last fetched: 2018-12-16 20:17:21 last modified: 2018-12-17 06:31:53 expires: Expired Immediately Data size: 17911 B Security: This is a secure document. strongly-framed: 1 security-info: FnhllAKWRHGAlo+ESXykKAAAAAAAAAAAwAAAAAAAAEap ... (and so on) request-method: POST request-Accept-Encoding: gzip, deflate, br request-User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:64.0) Gecko/20100101 Firefox/64.0 response-head: HTTP/1.1 200 OK Server: Server Date: Sun, 16 Dec 2018 19:17:14 GMT Content-Type: text/html; charset=utf-8 Status: 200 OK X-Frame-Options: SAMEORIGIN X-XSS-Protection: 1; mode=block X-Request-Id: 2K84AFOOBARX4FNG9D4 ETag: W/"76e8cacfoobar0b8be5" Cache-Control: max-age=0, private, must-revalidate X-Runtime: 0.300085 X-Content-Type-Options: nosniff, nosniff Content-Encoding: gzip x-amz-rid: 2K84AFOOBARX4FNG9D4 Vary: Accept-Encoding,User-Agent original-response-headers: Server: Server Date: Sun, 16 Dec 2018 19:17:14 GMT Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive Status: 200 OK X-Frame-Options: SAMEORIGIN X-XSS-Protection: 1; mode=block X-Content-Type-Options: nosniff X-Request-Id: 2K84AFOOBARX4FNG9D4 ETag: W/"76e8cacfoobar0b8be5" Cache-Control: max-age=0, private, must-revalidate X-Runtime: 0.300085 X-Content-Type-Options: nosniff Content-Encoding: gzip Set-Cookie: _session_id2=9f298foobarfb208b; path=/; expires=Mon, 17 Dec 2018 01:17:14 -0000; HttpOnly x-amz-rid: 2K84AFOOBARX4FNG9D4 Vary: Accept-Encoding,User-Agent net-response-time-onstart: 1266 net-response-time-onstop: 1274 00000000: 1f 8b 08 00 00 00 00 00 00 03 ed bd fb 72 db 48 .............r.H 00000010: 92 2f fc f7 f8 29 d0 9c d9 96 fc b5 78 27 75 b3 ./...)......x'u. 00000020: 25 1f 59 b6 dc ee 76 bb dd 96 3c 9e 6e af 83 01 %.Y...v...<.n... ... (and so on)。您将在state组件中拥有state，而Parent组件将通过一些操作对其进行突变。但这种情况并非如此。如果您始终只有这两种类型的提交，则可以通过在Child / prop上添加argument / Parent使其通用，来确定哪种类型的提交提交使用。如果将来您将有多种类型的提交，那么它根本就不会通用，那么就不必压倒HOC组件了。您可以从Parent组件进行提交，并将所需的Submit函数作为参数传递给Child。作为一个很好的例子，您可以检查redux-form库。

Answer 2

是否有特定原因想要在WrappedComponent中定义onSubmit？如果我是您，我会在其父级中定义它，以便您可以将其作为道具传递给HOC。我在表单中使用的一种非常常见的模式是制作一个表单组件（例如LoginForm），该组件处理表单逻辑，然后将其包装在处理提交逻辑及其所有内容的LoginPage中。 LoginPage向下传递一个handleSubmit / onSubmit道具到LoginForm，然后在提交时调用它。这也使您可以轻松地重用表单。

ReactJS：如何将道具从WrappedComponent传递到高阶组件？

2 个答案: