Как мне справиться с прессой и отжать сенсорный компонент с изменениями стиля? - PullRequest
Новая
       20

Как мне справиться с прессой и отжать сенсорный компонент с изменениями стиля?

1 голос
/ 29 апреля 2019

Идея состоит в том, чтобы создать определенный Touchable компонент, действующий как кнопка и имеющий ощущение нажатия и отсутствия нажатия, и использующий этот компонент много раз в моем приложении, но только один можно нажимать одновременно. Если к одному прикоснуться, а затем к другому, первый должен быть нажат, а второй - нажат. Идея не в том, чтобы использовать Redux для решения этой проблемы.

Я уже обрабатываю, какой компонент был нажат, и отправляю через реквизиты действия компоненту. Но я не знаю, как управлять всеми кнопками одновременно общим способом, то есть не создавать переменную для каждой кнопки.

мое приложение: 

<View>
<ActivityButton activityTitle={"B1"} submit={() => this.submitHandler("B1")} />
<ActivityButton activityTitle={"B2"} submit={() => this.submitHandler("B2")} />
</View>

мой компонент (ActivityButton): 

this.state={active:false}

<TouchableOpacity style={this.state.active ? styles.buttonPress : styles.button} onPress={this.props.submit}>
                <View>
                    <Text>{this.props.activityTitle}</Text>
                </View>
</TouchableOpacity>

1 Ответ

1 голос
/ 29 апреля 2019

Я предполагаю, что вы пытаетесь сделать что-то вроде группы радиокнопок? Если ваши кнопки расположены только на одной странице, вы можете добиться этого с помощью состояния в MyApp, чтобы проверить, какие кнопки включены вместо самой кнопки.

MyApp 

constructor(props) {
    super(props);
    this.state = {
        buttonIdThatEnable: "",
    };
}

submitHandler = (buttonId) => {
    this.setState({
        buttonIdThatEnable: buttonId,
    });
}

render() {
    return (
        <View>
            <ActivityButton
                activityTitle={"B1"}
                active={this.state.buttonIdThatEnable === "B1"}
                submit={() => this.submitHandler("B1")}
            />
            <ActivityButton
                activityTitle={"B2"}
                active={this.state.buttonIdThatEnable === "B2"}
                submit={() => this.submitHandler("B2")}
            />
        </View>
    )
}

ActivityButton (используйте props.active для определения стиля) 

<TouchableOpacity style={this.props.active ? styles.buttonPress : styles.button} 
    onPress={this.props.submit}>
                <View>
                    <Text>{this.props.activityTitle}</Text>
                </View>
</TouchableOpacity>

Если ваши кнопки расположены в разных компонентах, и вы не хотите использовать Redux, вы можете рассмотреть React Context API

...