Question

我正在尝试创建一个屏幕，以便用户根据自己的兴趣选择一些标签。

我无法更新状态；如果用户选择了特定兴趣，则会将ID传递给handleclick函数，但不会更新兴趣数组/状态。

import React from 'react';
import { Button, Text, View, StyleSheet, TouchableOpacity, Alert } from 'react-native';
var Dimensions = require('Dimensions');
var deviceWidth = Dimensions.get('window').width;
var deviceHeight = Dimensions.get('window').height;

class Interest extends React.Component {

static navigationOptions = {
}

  constructor(props) {
    super(props);
    this.state ={
      interests: [
        {id:0, value: 'Interest 1', tagSelection: 'tagUnselected'},
        {id:1, value: 'Interest 2', tagSelection: 'tagUnselected'},
        {id:2, value: 'Interest 3', tagSelection: 'tagUnselected'},
        {id:3, value: 'Interest 4', tagSelection: 'tagSelected'},
        {id:4, value: 'Interest 5', tagSelection: 'tagUnselected'},
        {id:5, value: 'Interest 6', tagSelection: 'tagUnselected'},
      ]
  };
   // this.handleClick = this.handleClick.bind(this)
}

  handleClick = (interestId)=> {
  this.state.interests.map(interest => {
    if(interest.id === interestId && interest.tagSelection == 'tagSelected'){
        console.log('this is tag unselected', interestId)
        var selectedObj = {
          id: interest.id,
          value: interest.value,
          tagSelection: 'tagUnselected'
        }
     let intArray = [...this.state.interests];
     intArray[interestId] = selectedObj;
     this.setState({interests: intArray})
    }
    else if (interest.id === interestId && interest.tagSelection == 'tagUnselected'){
      console.log('this is tag unselected', interestId)
        var unselectedObj = {
          id: interest.id,
          value: interest.value,
          tagSelection: 'tagSelected'
      }
     let intArray = [...this.state.interests];
     intArray[interestId] = selectedObj;
     this.setState({interests: intArray})
    }
  })
}


  render() {
    return (
      <View style={styles.container}>
      { this.state.interests.map(interest => {
        return (
          <TouchableOpacity
            key = {interest.id}
            onPress= {()=> {this.handleClick(interest.id)}}
            style = {interest.tagSelection == 'tagUnselected' ? styles.tagUnselected : styles.tagSelected }
            >
          <Text style={styles.textUnselected}> {interest.value} </Text>
        </TouchableOpacity>
        )
      })
    }
      </View>
    );
  }
}

const styles = StyleSheet.create({
   container: {
    flex: 1,
    backgroundColor: 'black',
   },
   tagUnselected: {
     fontSize: 18,
     width: deviceWidth*.35,
     height: 40,
     fontWeight: '500',
     borderColor: 'red',
     borderWidth: 1.5,
     borderRadius: 40,
     marginTop:40,
     marginHorizontal: 15,
     alignItems: 'center',
   },
   tagSelected: {
     fontSize: 18,
     fontWeight: 'bold',
     width: deviceWidth*.35,
     backgroundColor: 'red',
     height: 40,
     fontWeight: '500',
     borderColor: 'red',
     borderWidth: 1.5,
     borderRadius: 40,
     marginTop:40,
     marginHorizontal: 15,
     alignItems: 'center',
     color: 'black'
   },
   textSelected: {
    color: 'red',
    paddingTop: 10
   },
   textUnselected: {
    backgroundColor: 'red',
    paddingTop: 10,
    color: 'black'
   },
   button: {
    marginTop: 40,
    marginHorizontal: 15,
    alignItems: 'center',
    backgroundColor: '#0093FF',
    padding: 10,
  },
    loginNavigateButton: {
     color: 'red',
     marginTop:40,
     marginHorizontal: 15,
     alignItems: 'center',
  },
})

export default Interest

在选择标签后，用户应该能够看到他选择突出显示的标签。

Answer 1

该double balance = <INSERT_VALUE>; balance = balance*100; balance = Math.round(balance); balance = balance/100;函数似乎发生了太多事情。

我认为您应该使用过滤器而不是地图来查找所需的项目。

您可以使用过滤器找到该项目，然后检查是否已选中该项目，并从该状态更新其状态。

handleClick

这是工作https://snack.expo.io/ry-dAv9fE

的小吃

我个人不会使用handleClick = (interestId) => { let interests = this.state.interests.filter(interest => interest.id === interestId); if (interests.length === 1) { let interest = interests[0]; if (interest.tagSelection === 'tagUnselected') { interest.tagSelection = 'tagSelected'; } else { interest.tagSelection ='tagUnselected'; } let intArray = [...this.state.interests]; intArray[interestId] = interest; this.setState({interests: intArray}) } }或tagSelected这样的字符串

尝试为一组标签添加选中/未选中状态

1 个答案: