javascript - React-Native Button onPress 不起作用？

Question

我在使用 onPress 时遇到了问题，尝试了所有的解决方案，但没有使用 handleClick 功能，我也尝试过以下方法:

onPress={this.handleClick}
onPress={this.handleClick()}
onPress={this.handleClick.bind(this)}
onPress={() => this.handleClick.bind(this)}

我尝试将函数更改为:

handleClick(){
   console.log('Button clicked!');
}

这是我的代码:

import React, { Component } from 'react';
import {
  View,
} from 'react-native';

import Card from './common/Card';
import CardItem from './common/CardItem';
import Buttom from './common/Buttom';
import Input from './common/Input';

export default class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
    }
  }

  onLoginPress() {
    //console.log(`Email is : ${ this.state.email }`);
    //console.log(`Password is : ${ this.state.password }`);
  };

  handleClick = () => {
    console.log('Button clicked!');
  };

  render() {
    return (
      <View >
        <Card>

          <CardItem>
              <Input
                  label='Email'
                  placeholder='Enter your email'
                  secureTextEntry={false}
                  onChangeText = { (email) => this.setState({ email })}
              />
          </CardItem>

          <CardItem>
              <Input
                  label='Password'
                  placeholder='Enter your password'
                  secureTextEntry={true}
                  onChangeText = { (password) => this.setState({ password })}
              />
          </CardItem>

          <CardItem>
            <Buttom onPress={this.handleClick}> Login </Buttom>
          </CardItem>

        </Card>
      </View>
    );
  }
}

这是我的 Buttom.js 文件:

import React from 'react';
import {StyleSheet, Text, TouchableOpacity} from 'react-native';

const Buttom = (props) => {
  return(
    <TouchableOpacity style={styles.ButtomView} >
      <Text style={styles.TextButtom}> {props.children} </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  ButtomView: {
    flex: 1,
    height: 35,
    borderRadius: 5,
    backgroundColor: '#2a3744',
    justifyContent: 'center',
    marginVertical: 15
  },
  TextButtom: {
    color: '#fff',
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 15,
  }
});
export default Buttom;

Answer 1

您不能将事件绑定(bind)到组件。事件只能附加到 React-Native 中的 React Native 元素或 React 中的 DOM。

你应该传递事件处理器，

<Buttom onPressHanlder={this.handleClick}> Login </Buttom>

在 Buttom 组件中使用 props.onPressHanlder 调用传递的事件处理程序:

const Buttom = (props) => {
  return(
    <TouchableOpacity style={styles.ButtomView} onPress={props.onPressHanlder}>
                                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

      <Text style={styles.TextButtom}> {props.children} </Text>
    </TouchableOpacity>
  );
}