如何在React Native中使用onPress道具获得用户的选择 [英] How to get a user’s choice with onPress props in React Native

问题描述

大家好.请问React Native对React e.target.innerText的替代是什么?我正在尝试从TouchableOpacity组件中获得用户点击的内容.我正在构建一个React Native测验应用程序.

Good day everyone. please what is React Native’s replacement of React’s e.target.innerText? I’m trying to get what a user click on from TouchableOpacity component. I’m building a React Native quiz app.

我使用TouchableOpacity作为选项.我正在使用onPress函数来获取用户使用

I used TouchableOpacity for the options. I’m using onPress function to get the options the user clicks on with

<View style={{ flex: 2, flexDirection: 'row', justifyContent: 'space-between' }}>
                    <TouchableOpacity onPress = {(e)=>this.props.onAnswer(e, currentQuestion)}>
                        <View style={{ width: 171.5, height: 100, backgroundColor: 'lightgrey' }}>
                            <Text style={styles.options}>{questions[currentQuestion].options[0]}</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress = {(e)=>this.props.onAnswer(e, currentQuestion)}>
                        <View style={{ width: 171.5, height: 100, backgroundColor: 'lightgrey' }}>
                            <Text style={styles.options}>{questions[currentQuestion].options[1]}</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={{ flex: 2.7, flexDirection: 'row', justifyContent: 'space-between' }}>
                    <TouchableOpacity onPress = {(e)=>this.props.onAnswer(e, currentQuestion)}>
                        <View style={{ width: 171.5, height: 100, backgroundColor: 'lightgrey' }}>
                            <Text style={styles.options}>{questions[currentQuestion].options[2]}</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress = {(e)=>this.props.onAnswer(e, currentQuestion)}>
                        <View style={{ width: 171.5, height: 100, backgroundColor: 'lightgrey' }}>
                            <Text style={styles.options}>
                                {questions[currentQuestion].options[3]}
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>

因此，创建答案功能...如何确定用户是否选择了正确的答案.

So creating the answer function ... how do I determine if the user has chosen the correct answer.

onAnswer = () => {
        return (
            ??? === questions[currentQuestion].answer ? this.onCorrect() : this.onWrong()
          )
        }

如果是React，我会替换为'???'到e.target.innerText

If it was React,I'd have replaced the '???' to e.target.innerText

请在这里帮助我.

推荐答案

尝试一下:

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const questions = [
  {
    question: 'question1 ?',
    options: ['option1', 'option2', 'option3'],
    answer: 'option2',
    score: 10,
  },
  {
    question: 'question2 ?',
    options: ['option1', 'option2', 'option3'],
    answer: 'option1',
    score: 10,
  },
  {
    question: 'question3 ?',
    options: ['option1', 'option2', 'option3'],
    answer: 'option3',
    score: 10,
  },
];

class QuizQuestion extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      totalScore: 0,
      answered: questions.map(() => false), // All questions' answered state = false at statup
    };
  }

  render() {
    return (
      <View
        style={{
          flex: 2,
          flexDirection: 'row',
          justifyContent: 'space-between',
        }}
      >
        {questions.map(({
          question, options, answer, score,
        }, index) => (
          <View>
            <View>
              <Text>{question}</Text>
            </View>

            {/* Options  */}
            <View>
              {options.map(({ option }) => (
                <TouchableOpacity
                  onPress={() => {
                    let { totalScore, answered } = this.state;

                    if (!answered[index] && option === answer) {
                      answered[index] = true;
                      this.setState({
                        totalScore: totalScore + score,
                        answered,
                      });
                    }
                  }}
                >
                  <View>
                    <Text>{option}</Text>
                  </View>
                </TouchableOpacity>
              ))}
            </View>
          </View>
        ))}
      </View>
    );
  }
}

这篇关于如何在React Native中使用onPress道具获得用户的选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！