在嵌套数组工作作出反应本地

我正在在反应过来人，我已经写在PHP其获取的问题，并从数据库中选择一个API测验的应用程序，从API看起来像在嵌套数组工作作出反应本地

[{"id":2109, 
"title":"\u0915\u0930\u094d\u0923\u093e\u0932\u0940 \u0928\u0926\u0940\u0915\u094b \u0938\u0939\u093e\u092f\u0915 \u0928\u0926\u0940 \u0924\u0932\u0915\u093e \u092e\u0927\u094d\u092f\u0947 \u0915\u0941\u0928 \u0939\u094b\u0907\u0928 ?", 
"option":[{ 
    "option_id":191061, 
    "options":"\u0939\u0941\u092e\u094d\u0932\u093e \u0915\u0930\u094d\u0923\u093e\u0932\u0940", 
    "correct":0 
}, 
{ 
    "option_id":191062, 
    "options":"\u0920\u0942\u0932\u094b \u092d\u0947\u0930\u0940", 
    "correct":0}, 
{ 
    "option_id":191060, 
    "options":"\u092e\u0941\u0917\u0941 \u0915\u0930\u094d\u0923\u093e\u0932\u0940", 
    "correct":0 
},{ 
    "option_id":191059, 
    "options":"\u0921\u094b\u0932\u094d\u092a\u093e \u0915\u0930\u094d\u0923\u093e\u0932\u0940", 
    "correct":1 
} 
]}] 
................................

响应

等等，

现在，我已经成功地在我的反应应用程序中获取json，就像我喜欢的方式。但是现在我只想为每个问题选择一个选项，我希望根据用户选择突出显示该选项，并且必须通过使用json响应进行验证来检查用户是否正确。

我该如何做到这一点？

完整的代码是在这里：

import React, { Component } from 'react'; 
import { 
AppRegistry, 
StyleSheet, 
Text, 
View, 
TouchableHighlight, 
Alert, 
Navigator, 
WebView, 
ScrollView, 
ListView 
} from 'react-native'; 
export default class Api extends Component{ 
    constructor(){ 
    super() 
    this.state = { 
    id:'', 
    option_id:'', 
    option_option:[], 
    options_ans:[], 
    title:'', 
    data:[], 
    userSelectedIndex:-1, 
    } 
    } 

    componentWillMount(){ 
    fetch('http://192.168.1.11/loksewaquiz/index.php?  exam_of=kharidar', {method: 'GET'}) 
.then((response) => response.json()) 
.then((responseData) =>{ 
    this.setState({ 
     data:responseData, 
    }) 
    }) 
    .done(); 
    } 
    onUserSelectedOption(index){ 
    this.setState({ 
     userSelectedIndex:index, 

    }); 
    } 
    render(){ 

    const result = this.state.data.map((data) =>{ 
    const xx = data.ans_option.map((ans_option,index)=>{ 
     return (
     <TouchableHighlight onPress={()=> this.onUserSelectedOption(ans_option, index)}> 
     <Text key={ans_option.option_id} style={{backgroundColor: (index === this.state.userSelectedIndex) ? 'red' : 'transparent'}}> {ans_option.option_option}</Text> 
     </TouchableHighlight> 
    ) 
    }) 

    return(
     <View> 
     <Text style={styles.titles}>{data.title}</Text> 
     {xx} 
     </View> 
    ) 

    }) 
    return(
    <ScrollView> 
     {result} 
    </ScrollView> 

    ); 
    } 

} 

const styles = StyleSheet.create({ 
container: { 
    flex: 1, 
    flexDirection:'row', 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
button:{ 
    backgroundColor:'#EEE', 
    padding:10, 
    marginRight:5, 
    marginLeft:5, 
    }, 
    options:{ 
    padding:10, 
    marginRight:5, 
    marginLeft:5, 
    backgroundColor:'#EEE', 
    }, 
    titles:{ 
    backgroundColor:'#000', 
    color:'#FFF', 
    }, 
    selectedoptions:{ 
    backgroundColor:'#008000', 
    } 
    });

Here is the image when I select the first option

This is when I press the third option

来源

2016-11-17 Ujjwal Nepal

选项应用于该方法onUserSelectedOption（选项，索引）{ this.setState第一参数（{ userSelectedIndex：索引， }）; } –

不完全是，它会突出显示所有选项，例如：如果我单击问题1的选项1，它也会突出显示所有问题的选项1，并且突出显示也不是持久的。我会在上面添加一张图片来澄清结果。 –

上面的图片是我更新代码后拍摄的。谢谢 –

这样的事情，用的方法之一更新的高亮可以做

onUserSelectedOption = (option, index) => { 
    this.setState({ 
     userSelectedIndex: index 
    }); 
    if (option.correct === 1) { 
    //do something 
    }else { 
    //do something 
    } 
} 
render(){ 
    const result = this.state.data.map((data) =>{ 
    const xx = data.option.map((option, index)=>{ 
    return (
     <TouchableHighlight onPress={() => this.onUserSelectedOption(option, index)}> 
     <Text key={option.option_id} style={{backgroundColor: index === this.state.userSelectedIndex ? 'red' : 'transparent' }}>{option.options}</Text> 
     </TouchableHighlight> 
    ) 
    }) 
    return(
    <View> 
     <Text style={styles.titles}>{data.title}</Text> 
     {xx} 
     </View> 
) 
}) 
return(
    <ScrollView> 
    {result} 
    </ScrollView> 

); 
}

来源

2016-11-17 16:40:29

我希望选项在用户点击时突出显示。这怎么能实现？ –

更新了其中一种方法，您可以突出显示 –

其实我喜欢你做它的方式，但它突出了下一个问题的每个选项。你能帮我解决吗？ –

我会实际上分离了一个新的组合中的选项并通过道具传递相关数据。不是js的专家，但听起来更加稳固，然后嵌套地图功能。

来源

2016-11-18 06:16:58

在嵌套数组工作作出反应本地

回答

相关问题