Как получить выбор пользователя с помощью реквизита onPress в React Native

Question

Добрый день всем.пожалуйста, что является заменой React Native для eactt.innerText от React?Я пытаюсь получить то, что пользователь нажимает из компонента TouchableOpacity.Я создаю приложение викторины React Native.

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

<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>

Так что создаю функцию ответа ... как определить, выбрал ли пользователь правильный ответ.

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

Если бы это был React, я бы заменил '???'to e.target.innerText

Пожалуйста, помогите мне здесь.

Answer 1

Попробуйте это:

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>
    );
  }
}

Answer 2

EDIT:

Мой оригинальный ответ ниже похож на то, что у вас есть. Так что просто отредактируйте ваш метод onPress следующим образом:

onPress = {(e)=>this.props.onAnswer(currentQuestion, questions[currentQuestion].options[0])}

и ваш onAnswer сможет принимать ответы пользователей на вопросы:

onAnswer(question, usersAnswer) {
  ..
}

render() { ... }

**

---

В основном, реагирующие компоненты должны управляться данными или состояниями и реквизитом (вы не хотите работать с логикой, полагаясь на элементы DOM с чистым JS или JQuery).

Для этого вам нужен реакционный раствор, как показано ниже:

...
  state = {
    data: [{
      id: 1,
      name: 'Anna'
    },
    {
      id: 2,
      name: 'John'
    },
    {
      id: 3,
      name: 'James'
    },
    {
      id: 4,
      name: 'John'
    }]
  }
  onPersonPress(person) {
    console.log("e is ", person);
  }

  render() {
    const { data = [] } = this.state;
    return (
      <View>
        {data.map(person => {
          return (<TouchableOpacity onPress={(e) => this.onPersonPress(person)}>
            <View><Text>Click Me - {person.name}</Text></View>
          </TouchableOpacity>)
        })}
      </View>
    )
  }
  ...

Причина, по которой этот способ решения этой проблемы является наиболее распространенным, заключается в его гибкости и, возможно, наиболее логичном. При этом вы можете использовать идентификатор (id) или любое поле вместо того, чтобы принудительно указывать на то, что Text отображает «innerText», который не всегда уникален (в моем случае есть еще один Джон)

P.S .: Другим не нравится эта реализация из-за соображений производительности onPress={(e) => this.onPersonPress(person)}, поэтому есть другие способы добиться того же.