时间戳

首页 > 解决方案 > 反应本机更改按钮颜色无法正常工作

react-native - 反应本机更改按钮颜色无法正常工作

问题描述

我有 Button 的可重用组件：

   import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";

import { styles } from "./styles";

class TransactionFees extends Component {
  state = {
    pressed: false,
  };

  render() {
    const { pressed } = this.state;
    const { speed, eth, usd } = this.props;
    return (
      <View>
        <TouchableOpacity  style={ pressed ? styles.pressedButton : null } onPress={() => this.setState({ pressed: !pressed })}>
          <Text style={styles.transactionFeeTitle}>{speed}</Text>
          <Text style={styles.transactionFeeSubText}>{eth} ETH</Text>
          <Text style={styles.transactionFeeSubText}>$ {usd} </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default TransactionFees;

这就是我在另一个组件中使用它的方式：

<View style={styles.transactionFeeChoices}>
        <TransactionFees speed={"Slow"} eth={"0.000010"} usd={"0.02"} />
        <TransactionFees speed={"Average"} eth={"0.000030"} usd={"0.03"} />
        <TransactionFees speed={"Fast"} eth={"0.000050"} usd={"0.04"} />
      </View>

当我按下按钮时，背景颜色变为蓝色，问题是 当我点击第二个按钮时，第一个按钮不会变为默认背景颜色

请问有什么办法解决这个问题吗？

标签： react-native

解决方案

当前创建组件的方式TransactionFees意味着每个 TransactionFees 事件都有其自己的内部状态。因此，当一个 TransactionFees 发生变化时，并不意味着其他 TransactionFees 会自动更新。您可以将它们视为自治组件。

但是，在您的情况下， TransactionFees 事件不应该是自动的，一个事件的变化应该反映在其他事件中。这是一个经典的反应模式，最常见的解决方案是从 TransactionFeeds 组件“提升状态”到父组件。官方文档中甚至还有一篇关于反应的文章

采取的步骤

  1. 在父级中有一个状态变量，用于保存选定的 TransactionFees
  2. pressed作为道具传入TransactionFees 事件
  3. 传入一个更改处理函数，当按下其中一个按钮时 TransactionFees 组件可以调用该函数

在代码中，这或多或少是：


class Manager extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: '',
    };
  }

  onChangeSelection = selected => {
    this.setState({
      selected,
    });
  } 

  render() { 
    const { selected } = this.state;
    return (
      <View style={styles.transactionFeeChoices}>
        <TransactionFees speed={"Slow"} eth={"0.000010"} usd={"0.02"} pressed={selected === 'Slow'} onPress={() => this.onChangeSelection('Slow')} />
        <TransactionFees speed={"Average"} eth={"0.000030"} usd={"0.03"} pressed={selected === 'Average'} onPress={() => this.onChangeSelection('Average')} />
        <TransactionFees speed={"Fast"} eth={"0.000050"} usd={"0.04"} pressed={selected === 'Fast'} onPress={() => this.onChangeSelection('Fast')} />
      </View>
    );
  }

}

class TransactionFees extends Component {
  render() {
    const { speed, eth, usd, pressed, onPress } = this.props;
    return (
      <View>
        <TouchableOpacity  style={ pressed ? styles.pressedButton : null } onPress={onPress}>
          <Text style={styles.transactionFeeTitle}>{speed}</Text>
          <Text style={styles.transactionFeeSubText}>{eth} ETH</Text>
          <Text style={styles.transactionFeeSubText}>$ {usd} </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

推荐阅读