React Native中点击按钮时如何实现组件间数据传递？

我来帮你搞定这个问题～你当前的核心痛点是：ZipInput组件的输入状态只在自己内部管理，导致父组件HomeScreen和按钮组件GoButton拿不到输入的邮政编码，没法在点击按钮时把数据传递给下一个页面。咱们可以用React里经典的状态提升模式来解决，具体步骤如下：

1. 将状态提升到父组件HomeScreen #

把原本属于ZipInput的输入状态，转移到它的父组件HomeScreen中，让父组件成为数据的"单一来源"，这样所有子组件都能共享这个数据。

修改后的HomeScreen.js代码：

import React from 'react';
import { StyleSheet, Text, View, ImageBackground } from 'react-native';
import styles from '../assets/style'
import Header from '../components/header';
import ZipInput from '../components/zipinput';
import InsuranceType from '../components/insurancetype';
import GoButton from '../components/gobutton';
import {StackNavigator} from 'react-navigation';

export default class HomeScreen extends React.Component {
  // 初始化邮政编码状态
  state = {
    zipCode: ''
  };

  // 处理输入变化的回调函数
  handleZipChange = (text) => {
    this.setState({ zipCode: text });
  };

  render() {
    const { navigation } = this.props;
    const { zipCode } = this.state;

    return (
      <View style={styles.container}>
        <Header />
        <ImageBackground style={styles.imgbg} source={{ uri: 'https://www.expertinsurancereviews.com/wp-content/uploads/2017/03/background-hp-1.jpg' }} >
          <View style={styles.intro}>
            <Text style={styles.title}>Compare Insurance Rates</Text>
            {/* 给ZipInput传递状态值和变化回调 */}
            <ZipInput value={zipCode} onChangeText={this.handleZipChange} />
            <InsuranceType style={styles.select} />
            {/* 给GoButton传递邮政编码和导航实例 */}
            <GoButton zipCode={zipCode} navigateProp={navigation} />
          </View>
        </ImageBackground>
      </View>
    );
  }
}

2. 修改ZipInput组件，改为受控组件 #

去掉ZipInput自己的内部状态，改用父组件传递过来的value和onChangeText回调，让它成为一个只负责展示和触发事件的受控组件。

修改后的ZipInput.js代码：

import React from 'react';
import { TextInput } from 'react-native';
import styles from './../assets/style';

export default class ZipInput extends React.Component {
  render() {
    // 从props中接收父组件传递的属性
    const { value, onChangeText } = this.props;

    return (
      <TextInput 
        style={styles.input} 
        onChangeText={onChangeText} 
        value={value} // 绑定父组件的状态值
        keyboardType={'numeric'} 
        placeholder={'Enter Zip Code'} 
      />
    );
  }
}

3. 修改GoButton组件，传递数据到目标页面 #

在按钮点击时，把父组件传递过来的邮政编码作为参数，通过导航器传递给ZipResultScreen页面。

修改后的GoButton.js代码：

import React from 'react';
import { Button, View } from 'react-native';
import styles from './../assets/style';
import {StackNavigator} from 'react-navigation';

export default class GoButton extends React.Component {
  _handlePress = () => {
    const { zipCode, navigateProp } = this.props;
    
    // 导航时携带邮政编码参数
    navigateProp.navigate('ZipResultScreen', { zipCode: zipCode });
    alert(`即将传递的邮政编码：${zipCode}`);
  };

  render() {
    return (
      <View style={styles.buttonContainer}>
        <Button 
          onPress={this._handlePress} 
          title="GO" 
          accessibilityLabel="Find Insurance Quotes" 
          color='#fff' 
        />
      </View>
    );
  }
}

4. 在目标页面ZipResultScreen接收数据 #

最后，你可以在ZipResultScreen中通过导航器的参数获取传递过来的邮政编码：

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

export default class ZipResultScreen extends React.Component {
  render() {
    // 从导航参数中提取邮政编码
    const { zipCode } = this.props.navigation.state.params;

    return (
      <View style={styles.container}>
        <Text style={styles.text}>你输入的邮政编码是：{zipCode}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
  }
});

原理说明 #

状态提升的核心是让共享数据的父组件统一管理状态，子组件通过props接收状态和回调函数，这样就能实现组件间的数据共享和传递。这种模式能让你的数据流向更清晰，也更容易维护～

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