reactjs – 禁用TouchableHighlight onPress？

首先,感谢James Ide用于0700道具的超赞button组件.

我为按钮组编写了自定义组件–main.js–.并使用禁用道具禁用按钮组.

index.ios.js：

class PNTest extends React.Component{
  constructor(props){
    super(props)

    this.state ={
      clicked: []
    }
  }

  render(){
    return(
      <View style={styles.container}>
        <Main handleClick={this._handleClick.bind(this)} left={1} right={2} name={'group1'}/>
        <Main handleClick={this._handleClick.bind(this)} left={3} right={4} name={'group2'}/>
        <Text style={styles.welcome}>
          {this.state.clicked}
        </Text>
      </View>
    );
  }

  _handleClick(id,group){
    this.state.clicked.push(id);
    console.log(group + ' now inactive and clicked button id: ' + id);
    console.log('clicked button ids: ' + this.state.clicked);
  }
}

main.js：

class Main extends React.Component{
  constructor(props){
    super(props)

    this.state = {
      disabled: false,left: {},right: {}
    }
  }

  render(){
    return(
      <View style={styles.container}>
        <Button
          disabled={this.state.disabled}
          style={[styles.buttonContainer,this.state.left]}
          onPress={() => this._onPress(this.props.left)}>
          Left
        </Button>
        <Button
          disabled={this.state.disabled}
          style={[styles.buttonContainer,this.state.right]}
          onPress={() => this._onPress(this.props.right)}>
          Right
        </Button>
      </View>
    );
  }

  _onPress(id){
    var left = {};
    var right = {};

    if(id === this.props.left){
      left = styles.buttonSelected;
      right = styles.buttonNotSelected;
    }else if(id === this.props.right){
      right = styles.buttonSelected;
      left = styles.buttonNotSelected;
    }

    this.setState({
      disabled: true,left: left,right: right
    });

    this.props.handleClick(id,this.props.name);
  }
}