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

Question

在 react-native-paper 中（甚至直接在 react-native 中）我不明白如何做与 getElementById 等效的操作来修改元素。在 JavaScript 中，我会为每个按钮分配一个唯一的 id，然后当单击一个按钮时，我可以调用将根据其 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>
        )
    }

}