Реагируй на родной на Пресс TouchableHighlights индивидуально?

Question

Я просто хотел создать простую игру TicTacToe. Для этого мне нужно 9 кнопок. Я создал базовый макет, используя Виды, окруженные TouchableHighlights, чтобы сделать их кликабельными.

Если я нажимаю на кнопку, только эта кнопка должна менять ее цвет, но в настоящее время все кнопки меняют цвет одинаково. У кого-нибудь есть идеи, как это исправить?

Я не знаю, как обрабатывать состояние индивидуально для каждого TouchableHighlight.

Действительно ценю любую помощь.

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 = {
      backgroundColor: '#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({backgroundColor: randomHex()})}  underlayColor="white" style={{ height: screenWidth/3, width: screenWidth/3, borderRadius: 9, margin: 3, backgroundColor: this.state.backgroundColor}}>
                <View>

                </View>
              </TouchableHighlight>

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

                </View>
              </TouchableHighlight>

              <TouchableHighlight onPress={() => this.setState({backgroundColor: randomHex()})} underlayColor="white" style={{ height: screenWidth/3, width: screenWidth/3, borderRadius: 9, margin: 3, backgroundColor: this.state.backgroundColor}}>
                <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);

Answer 1

Поскольку вы используете backgroundColor: this.state.backgroundColor для всех кнопок одного цвета, вы можете сохранить переменную, в которой содержится текущий индекс / идентификатор нажатой кнопки, и установить цвет фона backgroundColor: this.state.activeButton===buttonid ?this.state.backgroundColor:''*. 1003 *

Answer 2

Попробуйте это:

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