如何在按钮列表上聚焦/模糊事件响应本机

Question

我正在尝试以原生方式模拟焦点/模糊事件，但没有成功。我有两个组件，主页和按钮。在家里，我呈现了一个按钮列表（category1，category2和category3）。这是我的代码：

--- HOME COMPONENT ----

state = {
    categories: ['category1', 'category2', 'category3']
};

renderCategories() {
    return this.state.categories.map((category, index) => (
        <Button onPress={() => this.getCategories(category)} key={index}>
            {category}
        </Button>
    ));
}

render() {
    return (
        <View>
            <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{marginBottom: 5}}>
                {this.renderCategories()}
            </ScrollView>
        </View>

    )
}

---按钮组件---

class Button extends Component {
    constructor(props) {
        super(props);
        this.state = { pressStatus: false };
    }

    _onHideUnderlay() {
        this.setState({ pressStatus: false });
        console.log('unpressed')
    }
    _onShowUnderlay() {
        this.setState({ pressStatus: true });
        console.log('pressed')
    }

    render () {

        const {buttonStyle, buttonPressedStyle, textStyle} = styles;
        return (
            <TouchableHighlight onPress={this.props.onPress}
                                underlayColor={'#fff000'}
                                activeOpacity={1}
                                style={[buttonStyle, this.state.pressStatus ? {backgroundColor: '#fff000'} : {backgroundColor: '#1D36FF'}]}
                                // onHideUnderlay={this._onHideUnderlay.bind(this)}
                                onShowUnderlay={this._onShowUnderlay.bind(this)}>
                <Text style={textStyle}>
                    {this.props.children}
                </Text>
            </TouchableHighlight>
        );
    }


}

const styles = {
    buttonStyle: {
        marginTop:10,
        paddingTop:15,
        paddingBottom:25,
        marginLeft:10,
        // marginRight:10,
        paddingLeft: 15,
        paddingRight: 15,
        backgroundColor:'rgba(99,99,99,0.99)',
        borderRadius:10,
        borderWidth: 1,
        borderColor: '#fff'
    },
    buttonPressedStyle: {
        marginTop:10,
        paddingTop:15,
        paddingBottom:25,
        marginLeft:10,
        // marginRight:10,
        paddingLeft: 15,
        paddingRight: 15,
        backgroundColor:'rgba(15,15,15,0.99)',
        borderRadius:10,
        borderWidth: 1,
        borderColor: '#fff'
    },
    textStyle: {
        color:'#fff',
        textAlign:'center',
        fontSize: 16
    },
};

此代码部分起作用。当我单击第一个按钮（类别1）时，它会按预期方式更改背景颜色，但是当我单击第二个按钮（类别2）时，按钮类别1应该采用初始样式（失去焦点）。

请帮助。谢谢

Answer 1

@@ Aramillo，因为所有三个按钮都使用相同的属性值pressStatus，所以您面临此问题。

以不同的方式执行。

请尝试下面的代码-

在App.js中>

import React, { Component } from "react";
import { ScrollView, Text, View } from "react-native";
import Button from "./Button";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pressedButton: null,
      categories: ["category1", "category2", "category3"]
    };
  }

  getCategories = (category, index) => {
    this.setState({ pressedButton: index });
  };

  renderCategories() {
    return this.state.categories.map((category, index) => (
      <Button
        onPress={() => this.getCategories(category, index)}
        buttonId={index}
        pressedButton={this.state.pressedButton}
        key={index}
      >
        <Text>{category}</Text>
      </Button>
    ));
  }

  render() {
    return (
      <View>
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          style={{ marginBottom: 5 }}
        >
          {this.renderCategories()}
        </ScrollView>
      </View>
    );
  }
}

export default App;
在Button.js

中>

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

class Button extends Component {
  constructor(props) {
    super(props);
    this.state = { pressStatus: false };
  }

  onHideUnderlay() {
    this.setState({ pressStatus: false });
    console.log("unpressed");
  }
  _onShowUnderlay() {
    this.setState({ pressStatus: true });
    console.log("pressed");
  }

  render() {
    const { buttonStyle, textStyle } = styles;
    return (
      <TouchableHighlight
        onPress={this.props.onPress}
        underlayColor={"#fff000"}
        activeOpacity={1}
        style={[
          buttonStyle,
          this.props.buttonId === this.props.pressedButton
            ? { backgroundColor: "#fff000" }
            : { backgroundColor: "#1D36FF" }
        ]}
        // onHideUnderlay={this._onHideUnderlay.bind(this)}
        onShowUnderlay={this._onShowUnderlay.bind(this)}
      >
        <Text style={textStyle}>{this.props.children}</Text>
      </TouchableHighlight>
    );
  }
}

export default Button;

const styles = {
  buttonStyle: {
    marginTop: 10,
    paddingTop: 15,
    paddingBottom: 25,
    marginLeft: 10,
    // marginRight:10,
    paddingLeft: 15,
    paddingRight: 15,
    backgroundColor: "rgba(99,99,99,0.99)",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#fff"
  },
  buttonPressedStyle: {
    marginTop: 10,
    paddingTop: 15,
    paddingBottom: 25,
    marginLeft: 10,
    // marginRight:10,
    paddingLeft: 15,
    paddingRight: 15,
    backgroundColor: "rgba(15,15,15,0.99)",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#fff"
  },
  textStyle: {
    color: "#fff",
    textAlign: "center",
    fontSize: 16
  }
};
此处为工作示例-https://codesandbox.io/s/empty-currying-cikw4