Работы с вложенным массивом в реакцию родной

Я делаю приложение викторины в срабатываю родной, я написал API в PHP, который извлекает вопрос и варианты из базы данных, с ответом из 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

Я хочу, чтобы опция была подсвечена, когда пользователь нажимает на нее. Как это можно достичь? –

Обновлено одним из способов, которым вы можете сделать выделение –

На самом деле мне понравилось, как вы это делали, но он также выделяет каждый вариант и на следующий вопрос. Можете ли вы получить меня через это? –

Я бы на самом деле разделяют параметры в новом compo и передавать соответствующие данные через реквизиты. Не эксперт по js, но звучит более солидно, чем вложенные функции карты.

источник

2016-11-18 06:16:58

Работы с вложенным массивом в реакцию родной

ответ

Смежные вопросы