Question

我有这个自定义按钮组件：

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

import { styles } from "./styles";

class TransactionFees extends Component {

  test = () => {
    const { speed, eth, usd,pressed,changeColor } = this.props;
    console.log("speed, eth, usd,pressed,changeColor",speed, eth, usd,pressed,changeColor)
  }

  render() {
    const { speed, eth, usd,pressed,changeColor,key } = this.props;

    return (
        <TouchableOpacity  style={ pressed ? styles.pressedButton : null } onPress={changeColor}>
          <Text style={styles.transactionFeeTitle}>{speed}</Text>
          <Text style={styles.transactionFeeSubText}>{eth} ETH</Text>
          <Text style={styles.transactionFeeSubText}>$ {usd} </Text>
        </TouchableOpacity>
    );
  }
}

export default TransactionFees;

这是我的用法：

<TransactionFees pressed={pressed} changeColor={this.changeColor}  key={"slow"}  speed={"Slow"} eth={"0.000010"} usd={"0.02"} />
        <TransactionFees pressed={pressed} changeColor={this.changeColor}  key={"average"}  speed={"Average"} eth={"0.000030"} usd={"0.03"} />
        <TransactionFees pressed={pressed} changeColor={this.changeColor}  key={"fast"} speed={"Fast"} eth={"0.000050"} usd={"0.04"} />

changeColor函数：

changeColor = () => {
    const {pressed} = this.state
    this.setState({pressed:!pressed})
  }

单击时，我只希望其中之一更改背景样式，但问题是单击它们时，它们全部更改背景样式，请问如何解决此问题的任何解决方案？

Answer 1

您将必须在父级中维护被按下的键，而不是像下面那样保持按下状态。在这里，我们使用changeColor传递选定的键，并将其保留在父键中，该键将用于比较和确定背景色。

class TransactionFeesContainer extends Component {
  state = {
    selectedKey: null,
  };

  changeColor = (key) => {
    this.setState({ selectedKey: key });
  };

  render() {
    return (
      <View>
        <TransactionFees
          selectedKey={this.state.selectedKey}
          changeColor={this.changeColor}
          speedkey={'slow'}
          speed={'Slow'}
          eth={'0.000010'}
          usd={'0.02'}
        />
        <TransactionFees
          selectedKey={this.state.selectedKey}
          changeColor={this.changeColor}
          speedkey={'average'}
          speed={'Average'}
          eth={'0.000030'}
          usd={'0.03'}
        />
        <TransactionFees
          selectedKey={this.state.selectedKey}
          changeColor={this.changeColor}
          speedkey={'fast'}
          speed={'Fast'}
          eth={'0.000050'}
          usd={'0.04'}
        />
      </View>
    );
  }
}

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

反应本机组件无法正常工作

1 个答案: