React Native中如何向自定义组件传递onPress并回传值至调用组件？

我克隆了一个React Native的GitHub项目，里面登录功能拆成了两个文件——Login.js负责业务逻辑，LoginView.js负责视图展示。现在需要给LoginView传递onPress回调，同时还要把LoginView里的表单输入值（邮箱、密码）回传给Login组件处理。

现有代码如下：

Login.js #

class Login extends Component {
  submitLogin(email, password) {
    alert('clickedLogin');
  }
  render() {
    return ( 
      <LoginView 
        onPress={this.submitLogin.bind(this)} 
        onSignupPress={this.displaySignupView.bind(this)}
      /> 
    )
  }
}

LoginView.js（部分代码） #

class LoginView extends Component {
  // 包含表单元素，需要接收onPress和onSignupPress
}

解决方案：通过回调函数实现数据回传 #

核心思路是：子组件LoginView内部维护表单输入的状态，当用户触发提交操作时，调用父组件传递过来的回调函数，并把表单状态值作为参数传回去。

第一步：完善LoginView组件

我们需要在LoginView里管理邮箱和密码的输入状态，然后在点击登录按钮时触发父组件的回调：

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

class LoginView extends Component {
  constructor(props) {
    super(props);
    // 初始化表单状态
    this.state = {
      email: '',
      password: ''
    };
  }

  // 实时更新邮箱输入
  handleEmailChange = (text) => {
    this.setState({ email: text });
  };

  // 实时更新密码输入
  handlePasswordChange = (text) => {
    this.setState({ password: text });
  };

  // 触发登录回调，把表单值传给父组件
  handleLoginPress = () => {
    const { email, password } = this.state;
    // 调用父组件传来的onPress，传递邮箱和密码
    this.props.onPress(email, password);
  };

  // 触发注册回调
  handleSignupPress = () => {
    this.props.onSignupPress();
  };

  render() {
    const { email, password } = this.state;
    return (
      <View style={{ padding: 20 }}>
        <TextInput
          placeholder="请输入邮箱"
          value={email}
          onChangeText={this.handleEmailChange}
          keyboardType="email-address"
          autoCapitalize="none"
          style={{ borderBottomWidth: 1, marginBottom: 15, paddingVertical: 8 }}
        />
        <TextInput
          placeholder="请输入密码"
          value={password}
          onChangeText={this.handlePasswordChange}
          secureTextEntry
          style={{ borderBottomWidth: 1, marginBottom: 20, paddingVertical: 8 }}
        />
        <Button title="登录" onPress={this.handleLoginPress} />
        <Button 
          title="注册" 
          onPress={this.handleSignupPress} 
          style={{ marginTop: 10 }} 
          color="#0066cc"
        />
      </View>
    );
  }
}

export default LoginView;

第二步：优化Login组件的回调绑定

为了避免在render里重复bind(this)（影响性能），建议用箭头函数自动绑定this：

import React, { Component } from 'react';
import LoginView from './LoginView';

class Login extends Component {
  // 用箭头函数自动绑定this，无需手动bind
  submitLogin = (email, password) => {
    // 这里就能拿到从LoginView回传的表单值了
    console.log('收到登录信息：', email, password);
    alert(`登录请求：邮箱${email}，密码${password}`);
    // 这里可以继续编写登录的业务逻辑，比如调用接口验证
  };

  displaySignupView = () => {
    // 处理切换到注册视图的逻辑
    alert('切换至注册页面');
  };

  render() {
    return ( 
      <LoginView 
        onPress={this.submitLogin} 
        onSignupPress={this.displaySignupView}
      /> 
    );
  }
}

export default Login;

可选：函数组件+Hooks版本 #

如果你更喜欢用函数组件，也可以用useState来实现状态管理：

LoginView.js（函数组件）

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';

const LoginView = ({ onPress, onSignupPress }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLoginPress = () => {
    onPress(email, password);
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="请输入邮箱"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
        style={{ borderBottomWidth: 1, marginBottom: 15, paddingVertical: 8 }}
      />
      <TextInput
        placeholder="请输入密码"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={{ borderBottomWidth: 1, marginBottom: 20, paddingVertical: 8 }}
      />
      <Button title="登录" onPress={handleLoginPress} />
      <Button 
        title="注册" 
        onPress={onSignupPress} 
        style={{ marginTop: 10 }} 
        color="#0066cc"
      />
    </View>
  );
};

export default LoginView;

Login.js（函数组件）

import React from 'react';
import LoginView from './LoginView';

const Login = () => {
  const submitLogin = (email, password) => {
    console.log('收到登录信息：', email, password);
    alert(`登录请求：邮箱${email}，密码${password}`);
  };

  const displaySignupView = () => {
    alert('切换至注册页面');
  };

  return ( 
    <LoginView 
      onPress={submitLogin} 
      onSignupPress={displaySignupView}
    /> 
  );
};

export default Login;

内容的提问来源于stack exchange，提问作者user8138816