Question

我有一个子组件，需要监听其父组件0.6rem之一。更准确地说，我在子组件中有一个函数，该函数采用来自父级的0.1 *2作为参数。我想每次form { padding: 4rem 0; position: relative; } input[type=text] { background: #fff; width: 500px; padding: 0.7rem; border: 1px solid #cbcbce; border-radius: 50px; color: #3a3d4b; } button { position: absolute; background: #6fc754; padding: 0.6rem 1rem; border: none; color: #fff; border-radius: 25px; left: calc(500px + 1.4rem); bottom: 4.2rem; transform: translateX(-100%) }发生时都调用此函数。

作为示例，这是一个结构：

<form>
  <input type="text" placeholder="Enter text">
  <button>Send Invite</button>
</form>

我已经考虑了两种方法：

使用event从父event调用子函数（假设我可以访问它）
使用event存储事件并将其作为class Parent extends React.Component { handleKeyDown = (event) => { // Call the child function doSomething() } render() { return ( <input type="text" onKeyDown={this.handleKeyDown} > <Child /> ) } } class Child extends React.Component { doSomething = (event) => { // Get the event from parent } render() { return ( ... ) } }传递给孩子，然后用ref听onKeyDown的变化。

但是，这些解决方案似乎都不具有吸引力。我还考虑过使用redux函数，但我需要子组件的数据以及父组件的state……我想知道是否有一种干净的方法吗？

Answer 1

我决定使用 Francis Malloch 在this post ¹上提供的解决方案：

class Parent extends React.Component {
   childCallables = null;

   setChildCallables = (callables) => {
      this.childCallables = callables;
   }

   handleKeyDown = (event) => {
      // Call the child function doSomething()
      this.childCallables.doSomething(event);
   }

   render() {
      return (
         <input
            type="text"
            onKeyDown={this.handleKeyDown}
         >

         <Child setCallables={this.setChildCallables} />
      )
   }
}

class Child extends React.Component {
   componentDidMount() {
      this.props.setCallables({
         doSomething: this.doSomething
      });
   }

   doSomething = (event) => {
      // Get the event from parent
   }

   render() {
      return (
         ...
      )
   }
}

基本上，我正在使用道具来存储需要从父级访问的子级方法。挂载子组件后，方法将保存在props中。

_{1。由于这是一个完全不同的问题的答案，因此我认为将其标记为重复是没有道理的。}

Answer 2

尝试根据渲染的props返回之前在render方法中调用doSomething，但这会导致无限循环，以防您在doSomething中更改子组件的状态。

Answer 3

您可以这样编写HOC：

const withChild = Wrapped => class Child extends React.Component {
   doSomething = (event) => {

   }

   render() {
      return (
         <React.Fragment>
            <Wrapped {...this.props} onKeyDown={this.doSomething}/>
            whatever Child should render
         </React.Fragment>
      )
   }
}

const ParentWithChild = withChild(class Parent extends React.Component {
   handleKeyDown = (event) => {
      // Call the child function doSomething()
      if (typeof(this.props.onKeyDown) === 'function') {
          this.props.onKeyDown(event);
      }
   }

   render() {
      return (
         <input
            type="text"
            onKeyDown={this.handleKeyDown}
         >
      )
   }
});

如何在带有响应的父事件上调用子方法？

3 个答案: