Инициировать событие onPress для дочернего компонента внутри родительского компонента. - PullRequest
Новая
       18

Инициировать событие onPress для дочернего компонента внутри родительского компонента.

2 голосов
/ 30 марта 2019

Я сделал компонент кнопки, который я рендерил в родительском компоненте.Некоторое время я застрял при попытке запустить функцию onPress события этого дочернего компонента, которая используется в моем Parent.

Я просматривал некоторые рекомендуемые вопросы и ответы, но мне нужны некоторыеконкретный совет.

Я максимально упростил свой код, пожалуйста, ознакомьтесь.

Заранее спасибо! 

// PARENT COMPONENT
export class Home extends Component {
  constructor(props) {
    super(props);
    this.onPress = this.onPress.bind(this);
 }

onPress = () => {
   console.log("Hey");
};


render() {
    return (
      <View style={styles.container}>
        <PrimaryButton text={"Sign up"} onPress={this.onPress} />
      </View>
    );
  }
 }



// CHILD COMPONENT
const PrimaryButton = ({ text }) => {
  return (
    <TouchableOpacity style={style.container} >
      <Text style={style.text}>{text}</Text>
    </TouchableOpacity>
  );
};

export default PrimaryButton;

1 Ответ

0 голосов
/ 01 апреля 2019

Вам необходимо передать onPress в TouchableOpacity в качестве реквизита. Я не знаю реквизиты для TouchableOpacity, но должен быть привязан как onPress или onClick. Обработчики событий всегда нужно передавать корневому компоненту (или как можно ближе к нему, т.е. TouchableOpacity от стороннего производителя). Большинство, если не все, сторонние компоненты будут иметь реквизиты для правильных событий. 

// CHILD COMPONENT
const PrimaryButton = ({ text, onPress }) => {
  return (
    <TouchableOpacity style={style.container} onClick={onPress} >
      <Text style={style.text}>{text}</Text>
    </TouchableOpacity>
  );
};
...