如果其中一个被按下,如何禁用TouchableHighlight组?可能吗 ?例如,我有listview,每行有两个TouchableHighlights.如果其中一个按下,我想禁用这两个触摸的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); } }