как сфокусировать / размыть событие в списке кнопок реагировать на родной

Question

Я пытаюсь эмулировать событие фокуса / размытия в оригинальной реакции безуспешно. У меня есть два компонента, Дом и Кнопка. Дома я отображаю список кнопок (категория1, категория2 и категория3). Вот мой код:

--- ДОМАШНИЙ КОМПОНЕНТ ----

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 для всех трех кнопок.

Сделайте это по-разному.

Пожалуйста, попробуйте следующий код -

в Приложение. 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;

В Кнопка. 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