Question

我有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>

当我按下按钮时，背景颜色变为蓝色，并且问题出在当我单击第二个按钮时，第一个按钮没有设置为默认背景颜色

请问有什么解决方法吗？

Answer 1

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

但是，在您的情况下，TransactionFees事件不应是自动发生的，一个事件的更改应反映在其他事件中。这是经典的反应模式，其中最常见的解决方案是将TransactionFeeds组件中的状态“提升”到父项中。甚至有一篇关于in the official docs

的文章

采取的步骤

在父级中具有一个状态变量，用于保留选定的TransactionFees
传入pressed作为对TransactionFees事件的支持
传递一个更改处理函数，当按下其中一个按钮时，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>
    );
  }
}

Answer 2

要这样做

您需要将统计信息保留在父级中

并向每个按钮传递更改状态的功能

并将当前状态移动到每个按钮

像这样

<TransactionFees speed={"Slow"}
  setClicked(()->{
     this.setState({clicked:true})
  clicked={this.state.clicked} 
  eth={"0.000010"} usd={"0.02"} 
/>

Answer 3

您已创建3个TransactionFees实例，它们将具有各自独立的状态。因此，单击第二个按钮不会更改第一个按钮的状态。

如果要通过按钮单击来触发样式更改，则需要在所有那些TransactionFees实例之间使用共享值。

有两种方法可以做到这一点，具体取决于存储该值的位置

您可以将其存储为父组件的状态，并将其传递给TransactionFees组件
您可以将其存储在redux存储中，并通过将组件连接到存储在TransactionFees中使用。

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

3 个答案: