React Native技术问题：如何将NumberButton的label属性传入setState

嘿，作为React Native新手碰到这个问题太正常啦，我来一步步帮你解决！

核心思路很简单：你需要在App.js里定义一个回调函数，让它接收按钮的label值，然后用这个值去更新组件状态。接着把这个回调函数传给NumberButton组件，在按钮被点击时触发回调并带上label参数。

方法一：在父组件（App.js）里传递带参数的回调 #

首先修改你的App.js，添加状态和处理点击的方法：

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentInput: '', // 存储计算器的输入内容
    };
    // 绑定this，确保回调里的this指向当前App组件
    this.handleNumberTap = this.handleNumberTap.bind(this);
  }

  handleNumberTap(label) {
    // 这里根据你的计算器逻辑更新状态，比如把数字追加到输入框
    this.setState(prevState => ({
      currentInput: prevState.currentInput + label,
    }));
  }

  render() {
    return (
      <View style={styles.container}>
        {/* 显示当前输入的内容 */}
        <Text style={styles.displayText}>{this.state.currentInput}</Text>
        {/* 传递带label参数的回调给NumberButton */}
        <NumberButton label="1" onPress={() => this.handleNumberTap("1")} />
        <NumberButton label="2" onPress={() => this.handleNumberTap("2")} />
        <NumberButton label="3" onPress={() => this.handleNumberTap("3")} />
        {/* 其他数字按钮同理 */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 10,
  },
  displayText: {
    fontSize: 32,
    marginBottom: 20,
    padding: 10,
    borderWidth: 1,
    width: '80%',
    textAlign: 'right',
  },
});

export default App;

方法二：在子组件（NumberButton）里自动传递label #

如果你不想在父组件里每次都写箭头函数，可以修改NumberButton组件，让它在点击时自动把自身的label传给父组件的回调：

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

class NumberButton extends React.Component {
  render() {
    return (
      <TouchableOpacity 
        style={styles.buttonBox} 
        onPress={() => this.props.onPress(this.props.label)} // 直接传入label
      >
        <Text style={styles.buttonText}>{this.props.label}</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  buttonBox: {
    width: 80,
    height: 80,
    backgroundColor: '#eee',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  buttonText: {
    fontSize: 24,
  },
});

export default NumberButton;

这时App.js里的按钮调用就可以简化成：

<NumberButton label="1" onPress={this.handleNumberTap} />
<NumberButton label="2" onPress={this.handleNumberTap} />

小提示 #

• 如果你觉得在constructor里绑定this麻烦，可以用类字段箭头函数来定义方法，这样就不用手动绑定了：

  handleNumberTap = (label) => {
    this.setState(prevState => ({
      currentInput: prevState.currentInput + label,
    }));
  }
  

• 计算器的逻辑可以慢慢扩展，比如处理小数点、运算符、清空等，核心的父子组件传值逻辑就是上面这样啦！

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