React Native: как передать параметры родительскому компоненту из дочернего компонента prop - PullRequest
Новая
       7

React Native: как передать параметры родительскому компоненту из дочернего компонента prop

2 голосов
/ 06 января 2020

Я хочу создать HO C, у которого есть триггер события при нажатии определенной клавиши. Когда эта клавиша нажата, она должна предоставить событие родительскому компоненту. В этом случае ключ «@».

Дочерний HO C

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 дочернего компонента в parent, функция потомка переопределяется родительским. В этом случае, как создать пользовательский триггер события из дочернего компонента и передать в него событие, чтобы родитель мог использовать его соответствующим образом?

1 Ответ

2 голосов
/ 06 января 2020

Я на самом деле решил это, удалив onMentionStart prop из HO C и передал функцию 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;
...