React Native：如何将参数从子组件道具传递给父组件

Question

我想创建一个在按下某个键时具有事件触发器的 HOC。当这个键被按下时，它应该向父组件提供一个事件。在这种情况下，键是“@”。

儿童 HOC

import React, { Component } from 'react';

const withMention = WrappedComponent => {
  return class extends Component {
    state = {
      mentionStart: false,
      textInput: '',
      selection: 0,
    };
    handleOnKeyPress = key => {
      if (key === '@') {
        this.setState({ mentionStart: true });
      }
    };

    render() {
      const { onMentionStart } = this.state;
      return (
        <WrappedComponent
          onChangeText={text => {
            this.setState({ textInput: text });
          }}
          onKeyPress={event => this.handleOnKeyPress(event.nativeEvent.key)}
          onSelectionChange={event =>
            this.setState({ selection: event.nativeEvent.selection })
          }
          onMentionStart={onMentionStart}
          {...this.props}
        />
      );
    }
  };
};

export default withMention;

父组件

const UserComment = withMention(TextInput);

<UserComment onMentionStart={(event) => console.log(event)}       />

我知道实现是错误的，因为每当我为父组件的 onMentionStart 属性分配一个函数时，子组件的函数就会被父组件覆盖。在这种情况下，如何从子组件创建自定义事件触发器并将事件传递给它，以便父组件可以相应地使用它？

Answer 1

我实际上是通过从 HOC 中删除 onMentionStart 属性并将 onMentionStart 函数作为回调从父级传递给子级来解决的，在 onKeyPress 处理函数中处理它。

import React, { Component } from 'react';

const withMention = WrappedComponent => {
  return class extends Component {
    state = {
      mentionStart: false,
      textInput: '',
      selection: 0,
    };
    handleOnKeyPress = key => {
      if (key === '@') {
        this.setState({ mentionStart: true }, () =>
          this.props.onMentionStart(this.state.mentionStart),
        );
      }
    };

    render() {
      return (
        <WrappedComponent
          onChangeText={text => {
            this.setState({ textInput: text });
          }}
          onKeyPress={event => this.handleOnKeyPress(event.nativeEvent.key)}
          onSelectionChange={event =>
            this.setState({ selection: event.nativeEvent.selection })
          }
          {...this.props}
        />
      );
    }
  };
};

export default withMention;