在嵌套數組工作作出反應本地

我正在在反應過來人，我已經寫在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

在嵌套數組工作作出反應本地

回答

相關問題