ReactJS – Disable TouchableHighlight onpress?

class PNTest extends React.Component{
 constructor(props){< br /> super(props)

 this.state ={
 clicked: []
 }
 }

 render(){ 
 return(
 
 

 

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

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

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

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

 _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);
 }
}

If one of them is pressed, how to disable the TouchableHighlight group? is it possible ? For example, I have a listview with two TouchableHighlights in each row. If one of them is pressed, I want to disable the onPress function of these two touches.

I solved this problem method As follows:

First of all, thank James Ide for the awesome button component used for 0700 items.

I wrote a custom component –main.js– for the button group. And Use disabled props to disable button groups.

index.ios.js:

class PNTest extends React.Component{
 constructor(props){
 super(props)
< br /> this.state ={
 clicked: []
 }
 }

 render(){
 return(
 
 

 < Main handleClick={this._handleClick.bind(this)} left={3} right={4} name={'group2'}/>
 
 {this.state.clicked}
 
 
 );
 }

 _handleClick(id, group){< br /> this.state.clicked.push(id);
 console.lo g(group + 'now inactive and clicked button id:' + id);
 console.log('clicked button ids: '+ this.state.clicked);
 }
}< /pre> 
main.js:
 
 
class Main extends React.Component{
 constructor(props){
 super(props)

 this.state = {
 disabled: false,
 left: {},
 right: {}
 }
 }
 
 render(){
 return(
 
  disabled={this.state.disabled}
 style={[styles.buttonContainer, this.state.left]}
 onPress={() => this._onPress(this.props.left)}>
 Left
 
  disabled={this.state.disabled}
 style={[styles.buttonContainer,this.state.right]}
 onPress={() = > this._onPress(this.props.right)}>
 Right
 
 
 );
 }
< br /> _onPre ss(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);
 }
}