Javascript 单独对本机onPress TouchableHighlights作出反应？

我只是想创建一个简单的Tictatcoe游戏。为此，我需要9个按钮。我创建了一个基本布局，使用由可触摸高光包围的视图使其可点击

如果我点击按钮，只有那个按钮会改变它的颜色，但是现在所有的按钮都会同时改变颜色。 有人知道怎么解决这个问题吗

我不知道如何单独处理每个TouchableHighlight的状态

非常感谢大家的帮助

从“React”导入React，{Component}； 进口{ 评估学， 样式表， 文本 看法 尺寸， 可触摸高光 }从“反应本机”； var screenWidth=维度。获取“窗口”。宽度； 屏幕宽度-=36； var screenHeigth=尺寸。获取“窗口”。高度； 让randomHex==>{ 让字母='0123456789ABCDEF'； 让颜色=； 对于设i=0；i<6；i++{ 颜色+=字母[Math.floorMath.random*16]； } 返回颜色； } 导出默认类randomBackground扩展组件{ 构造器{ 超级作物 此.state={ 背景颜色：“f5aef5” }; } 渲染{ 回来 井字棋 {/*第1行*/} this.setState{backgroundColor:randomHex}}underlayColor=white style={{height:screenWidth/3，width:screenWidth/3，borderRadius:9，margin:3，backgroundColor:this.state.backgroundColor}> this.setState{backgroundColor:randomHex}}underlayColor=white style={{height:screenWidth/3，width:screenWidth/3，borderRadius:9，margin:3，backgroundColor:this.state.backgroundColor}> this.setState{backgroundColor:randomHex}}underlayColor=white style={{height:screenWidth/3，width:screenWidth/3，borderRadius:9，margin:3，backgroundColor:this.state.backgroundColor}> ; } } const styles=StyleSheet.create{ outercardview：{ 边缘：屏幕高度/2-屏幕宽度/2-140， marginBottom:20， marginRight:10， 边缘左：10， 为内容辩护：“中心”， 高度：屏幕宽度， 阴影偏移：{ 宽度：2， 身高：2， }, 阴影颜色：“灰色”， 阴影不透明度：0.1， } }; AppRegistry.registerComponent'randomBackground'，=>randomBackground 由于您使用的是backgroundColor:this.state.backgroundColor，因此所有按钮的颜色都相同。您可以维护一个变量，该变量保存您按下的按钮的当前索引/id，并将背景颜色设置为backgroundColor:this.state.activeButton==buttonid？this.state.backgroundColor:

尝试以下操作：

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
    Dimensions,
  TouchableHighlight
} from 'react-native';

var screenWidth = Dimensions.get('window').width;
screenWidth-=36;
var screenHeigth = Dimensions.get('window').height;

let randomHex = () => {
  let letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++ ) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

export default class randomBackground extends Component {
  constructor(props) {
    super(props)

    this.state = {
      backgroundColor1: '#f5aef5',
      backgroundColor2: '#f5aef5',
      backgroundColor3: '#f5aef5'
    };
  }

  render() {
    return (
        <View style={{backgroundColor: '#f5f5f5', flex: 1}}>

          <Text style={{color:'black', alignSelf: 'center', fontSize: 100, marginTop: 60}}>TicTacToe</Text>

          <View style={styles.outercardview}>

            {/* row 1 */}
            <View style={{flexDirection:'row'}}>

              <TouchableHighlight onPress={() => this.setState({backgroundColor1: randomHex()})}  underlayColor="white" style={{ height: screenWidth/3, width: screenWidth/3, borderRadius: 9, margin: 3, backgroundColor: this.state.backgroundColor1}}>
                <View>

                </View>
              </TouchableHighlight>

              <TouchableHighlight onPress={() =>this.setState({backgroundColor2: randomHex()})} underlayColor="white" style={{ height: screenWidth/3, width: screenWidth/3, borderRadius: 9, margin: 3, backgroundColor: this.state.backgroundColor2}}>
                <View>

                </View>
              </TouchableHighlight>

              <TouchableHighlight onPress={() => this.setState({backgroundColor3: randomHex()})} underlayColor="white" style={{ height: screenWidth/3, width: screenWidth/3, borderRadius: 9, margin: 3, backgroundColor: this.state.backgroundColor3}}>
                <View>

                </View>
              </TouchableHighlight>

            </View>

        </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  outercardview: {
    marginTop: (screenHeigth/2)-(screenWidth/2)-140,
    marginBottom: 20,
    marginRight: 10,
    marginLeft: 10,
    justifyContent: 'center',
    height:screenWidth,

    shadowOffset: {
      width: 2,
      height: 2,
    },
    shadowColor: 'grey',
    shadowOpacity: 0.1,
  }
});
AppRegistry.registerComponent('randomBackground', () => randomBackground);

---

谢谢你的回答。您知道如何访问activeButton变量吗？我真的不知道如何访问当前按钮来更改其值。