Как отключить одну кнопку при нажатии другой кнопки в react-native-paper - PullRequest
Новая
       19

Как отключить одну кнопку при нажатии другой кнопки в react-native-paper

0 голосов
/ 09 мая 2020

В react-native-paper (или даже in react-native dirctly) я не понимаю, как сделать эквивалент getElementById для изменения элемента. В JavaScript я бы назначил каждой кнопке уникальный идентификатор, а затем, когда была нажата одна кнопка, я могу вызвать функцию, которая отключит / включит другую кнопку на основе ее идентификатора.

Однако я не вижу как выполнить sh эту задачу в react-native-paper (или response-native).

Вот пример кода: 

import React from 'react';
import {View, Alert} from 'react-native';
import {Button} from 'react-native-paper';

export default class App extends React.Component {
  render() {
    return (
    <View>
      <Button mode="contained" color="green" onPress={() => this.buttonOnePressed()}>Button One</Button>
      <Button mode="contained" color="red" onPress={() => this.buttonTwoPressed()}>Button Two</Button>
    </View>
    );
  }

  buttonOnePressed() {
    // If Button Two is disabled, then enable it.
    // If Button Two is enabled, then disable it.
    Alert.alert('Button ONE pressed');
  }

  buttonTwoPressed() {
    // Do something when Button Two is pressed
    Alert.alert('Button TWO pressed');
  }

}

1 Ответ

0 голосов
/ 09 мая 2020

В вашем коде создайте состояние для 1-й кнопки и другое состояние для 2-й кнопки. Затем, обрабатывая состояние 2, вы можете достичь того, чего хотите.

Вот пример кода: 

export class default Test extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            firstButtonEnable: false,
            secondButtonDisable: false,
        }
        this.handlingButton = this.handlingButton.bind(this)
    }

    handlingButton(){
        firstButtonEnable
        ?  this.setState({secondButtonDisable: true})
        : null;
    }
    render(){
        return(
            <View>
                <Button title='Button1' onPress={() => {
                    this.setState({firstButtonEnable: true});
                    handlingButton();
                }} />
                <Button disabled={secondButtonDisable} title='Button2' } />
            </View>
        )
    }

}
...