如何在 react-native-paper 中按下另一个按钮时禁用一个按钮

Question

在 react-native-paper 中（甚至直接在 react-native 中）我不明白如何做与 getElementById 等效的操作来修改元素。在 JavaScript 中，我会给每个按钮分配一个唯一的 ID，然后当一个按钮被点击时，我可以调用函数 disable/enable 另一个按钮基于它的 ID。

但是我没有看到如何在 react-native-paper（或 react-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');
  }

}

Answer 1

在您的代码中，为第一个按钮创建一个状态，为第二个按钮创建另一个状态。然后通过处理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>
        )
    }

}

如何在 react-native-paper 中按下另一个按钮时禁用一个按钮

How to disable one button when another button is pressed in react-native-paper

react-native

react-native-paper