Отключить реакцию собственных классов на нажатие другого класса в той же группе - PullRequest
Новая
       36

Отключить реакцию собственных классов на нажатие другого класса в той же группе

1 голос
/ 18 марта 2019

Я совершенно новичок, чтобы реагировать. С помощью TouchableHighlight я создал класс, 

import React, { Component } from "react";
import { Text, View, Image, TouchableHighlight } from "react-native";
export default class ChooseProComp extends Component {
  render() {
    return (
      <TouchableHighlight
        underlayColor="transparent"
        onPress={this.props.onPress}
        style={{ flex: 1 }}
      >
        <View
          style={{
            marginRight: this.props.mr,
            borderRadius: 3,
            backgroundColor: "#ffffff",
            borderWidth: 0.7,
            borderColor: "#e1e1e1",
          }}
        >
          <View style={{ flexDirection: "row", padding: 8 }}>
            <Image
              style={{
                width: 26,
                height: 26
              }}
              source={this.props.typeImage}
            />
            <Text
              style={{
                fontSize: 13,
                alignSelf: "center",
                marginLeft: 8,
                color: "#737f8d"
              }}
            >
              {this.props.type}
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  }
}

Я импортировал класс ChooseProComp в другой компонент, подобный этому, я не уверен, нужно ли мне добавлятьПользовательский метод. 

<View style={{ flexDirection: "row", marginBottom: 6 }}>
            <ChooseProComp
              mr={7}
              typeImage={require("../../../Images/homescreen/typeicons/medical/medical.png")}
              type="Medical"
              onPress={() => this.renderType("Medical")
            }
            />

            <ChooseProComp
              typeImage={require("../../../Images/homescreen/typeicons/dental/dental.png")}
              type="Dental"
              onPress={() => this.renderType("Dental")}
            />
          </View>
          <View style={{ flexDirection: "row", marginBottom: 6 }}>
            <ChooseProComp
              mr={7}
              typeImage={require("../../../Images/homescreen/typeicons/homiopathi/homia.png")}
              type="Homeopathy"
              onPress={() => this.renderType("Homeopathy")}
            />

            <ChooseProComp
              typeImage={require("../../../Images/homescreen/typeicons/ayurveda/ayurveda.png")}
              type="Ayurveda"
              onPress={() => this.renderType("Ayurveda")}
            />
          </View>
          <View
            style={{ flexDirection: "row", marginBottom: 6, marginBottom: 25 }}
          >
            <ChooseProComp
              mr={7}
              typeImage={require("../../../Images/homescreen/typeicons/yoga/yoga.png")}
              type="Yogic science"
              onPress={() => this.renderType("Yogic science")}
            />

            <ChooseProComp
              typeImage={require("../../../Images/homescreen/typeicons/unani/unani.png")}
              type="Unani"
              onPress={() => this.renderType("Unani")}
            />
          </View>

Поэтому, когда я выбираю определенный тип, например, Medical, я хочу отключить классы ChooseProComp других типов.Пожалуйста, помогите мне с этим.Непрозрачность других типов также должна быть уменьшена.

1 Ответ

1 голос
/ 18 марта 2019

Поскольку кажется, что вы просто хотите выбрать один элемент (<ChooseProComp>), я предлагаю вам просто обработать выбранный элемент в состоянии основного компонента, которое в начале будет неопределенным: 

state = {
  selected: undefined
};

Затем определите функцию onPress для каждого <ChooseProComp>, например: 

  onPress={() => {
    this.renderType("Medical"); // I don't know how this works so I won't modify it
    if(!this.state.selected){ // if the state is undefined, then set it!
      this.setState({
        selected: "Medical"
      })
    }
  }

Затем снова для каждого <ChooseProComp> передайте реквизит disabled, например: 

<ChooseProComp
  ...
  disabled={this.state.selected && this.state.selected !== 'Medical'}
/>

Итак, в<ChooseProComp> компонент (класс), вы можете использовать его в <TouchableHighlight>: 

  <TouchableHighlight
    underlayColor="transparent"
    onPress={this.props.onPress}
    style={{ flex: 1 }}
    disabled={this.props.disabled}
  >

Дайте мне знать, если это соответствует вашему вопросу, или я неправильно понял, или это не достаточно ясно!

...