Обработка двух TextBox как одно

Question

Из бд читаются данные вида _____? - _____ Анна, подчеркивания заменяются на TextBox. Проблема в их обработке при проверке, читается только последний из двух инпутов, хотя ожидается, что буду читаться, как одно целое.

Вот мое решение, подскажите, где проблемы:

import React, { useState } from 'react';

const InputTaskComponent = ({ examplesData, taskNumber }) => {
    const [userAnswers, setUserAnswers] = useState({}); // Состояние для хранения ответов пользователя
    const [results, setResults] = useState({}); // Состояние для хранения результатов проверки

    const handleWordInputChange = (event, key) => {
        const { value } = event.target;
        setUserAnswers({ ...userAnswers, [key]: value }); // Обновляем состояние с ответами пользователя
    };

    const renderWordButtons = (data) => {
        return Object.keys(data).map((key) => {
            if (key !== 'text') {
                const parts = key.split(/_+/); // Разбиваем текст на части по последовательностям подчёркиваний
        
                return (
                    <div key={key}>
                        <p>
                            {parts.map((part, index) => (
                                <React.Fragment key={index}>
                                    {part} 
                                    {index !== parts.length - 1 && ( // Добавляем поле ввода после каждой последовательности подчёркиваний, кроме последней
                                        <input
                                            type="text"
                                            style={{ width: "150px" }}
                                            onChange={(event) => handleWordInputChange(event, key)}
                                        />
                                    )}
                                </React.Fragment>
                            ))}
                        </p>
                    </div>
                );
            }
        });
    };
    
    

    const handleWordButtonClick = (soundUrl) => {
        const audio = new Audio(soundUrl);
        audio.play();
    };

    const checkAnswers = () => {
        const newResults = {}; // Создаем новый объект для хранения результатов проверки
        console.log(userAnswers)
    
        // Проверяем каждый введённый ответ на совпадение с правильной частью ответа из базы данных
        Object.keys(userAnswers).forEach((key) => {
            const userAnswer = userAnswers[key]; // Получаем ответ пользователя
            const originalAnswer = examplesData[taskNumber][key]; // Получаем правильный ответ из базы данных
            console.log('originalAnswer = ' + originalAnswer)
            console.log('key = ' + key)
            const formattedAnswer = key.replace(/_+/g, userAnswer); // Заменяем подчёркивания на ответ пользователя
            console.log('formattedAnswer = ' + formattedAnswer)
    
            // Сравниваем ответ пользователя с правильным ответом
            if (formattedAnswer === originalAnswer) {
                newResults[key] = true; // Помечаем правильный ответ
            } else {
                newResults[key] = false; // Помечаем неправильный ответ
            }
        });
    
        setResults(newResults); // Обновляем состояние с результатами проверки
    
        // Выводим уведомление
        const correctCount = Object.values(newResults).filter((result) => result === true).length;
        const correctList = Object.keys(newResults).filter((key) => newResults[key] === true).map((key) => examplesData[taskNumber][key]);
        const incorrectList = Object.keys(newResults).filter((key) => newResults[key] === false).map((key) => examplesData[taskNumber][key]);
        alert(Количество правильных ответов: ${correctCount}\nПравильные ответы: ${correctList.join(', ')}\nНеправильные ответы: ${incorrectList.join(', ')});
    };
    
    

    return (
        <div style={{ maxHeight: "700px", overflowY: "scroll" }}>
            {/* Рендерим кнопки и поля ввода */}
            {renderWordButtons(examplesData[taskNumber])}

            {/* Кнопка для проверки ответов */}
            <button onClick={checkAnswers} style={{maxWidth: '300px'}}>Проверить ответы</button>
        </div>
    );
};

export default InputTaskComponent;

Answer 1

Сделал вот такой вариант

import React, { useState } from 'react';

const InputTaskComponent = ({ examplesData, taskNumber }) => {
    const [userAnswers, setUserAnswers] = useState({}); // Состояние для хранения ответов пользователя
    const [results, setResults] = useState({}); // Состояние для хранения результатов проверки

    const handleWordInputChange = (event, key, index) => {
        const { value } = event.target;
        setUserAnswers(prevState => ({
            ...prevState,
            [key]: { ...(prevState[key]  {}), [index]: value }
        }));
    };

    const renderWordButtons = (data) => {
        return Object.keys(data).map((key) => {
            if (key !== 'text') {
                const parts = key.split(/_+/); // Разбиваем текст на части по последовательностям подчёркиваний
        
                return (
                    <div key={key}>
                        <p>
                            {parts.map((part, index) => (
                                <React.Fragment key={index}>
                                    {part} 
                                    {index !== parts.length - 1 && ( // Добавляем поле ввода после каждой последовательности подчёркиваний, кроме последней
                                        <input
                                            type="text"
                                            style={{ width: "150px" }}
                                            onChange={(event) => handleWordInputChange(event, key, index)}
                                            value={(userAnswers[key] && userAnswers[key][index])  ''} // Устанавливаем значение input из состояния
                                        />
                                    )}
                                </React.Fragment>
                            ))}
                        </p>
                    </div>
                );
            }
        });
    };

    const handleWordButtonClick = (soundUrl) => {
        const audio = new Audio(soundUrl);
        audio.play();
    };

    const checkAnswers = () => {
        const newResults = {}; // Создаем новый объект для хранения результатов проверки
        console.log('User answers:', userAnswers);
    
        // Проверяем каждый введённый ответ на совпадение с правильной частью ответа из базы данных
        Object.keys(userAnswers).forEach((key) => {
            const userAnswerObj = userAnswers[key]; // Получаем объект с ответами пользователя
            const originalAnswer = examplesData[taskNumber][key]; // Получаем правильный ответ из базы данных
    
            // Преобразуем строку key, заменяя подчеркивания на ответы пользователя
            let formattedAnswer = key;
            Object.keys(userAnswerObj).forEach((index) => {
                const userAnswer = userAnswerObj[index];
                formattedAnswer = formattedAnswer.replace(/_+/, userAnswer);
            });
    
            console.log('Original answer:', originalAnswer);
            console.log('Formatted answer:', formattedAnswer);
    
            // Сравниваем ответ пользователя с правильным ответом
            if (formattedAnswer === originalAnswer) {
                newResults[key] = true; // Помечаем правильный ответ
            } else {
                newResults[key] = false; // Помечаем неправильный ответ
            }
        });
    
        console.log('New results:', newResults);
        setResults(newResults); // Обновляем состояние с результатами проверки
    
        // Выводим уведомление
        const correctCount = Object.values(newResults).filter((result) => result === true).length;
        const correctList = Object.keys(newResults).filter((key) => newResults[key] === true).map((key) => examplesData[taskNumber][key]);
        const incorrectList = Object.keys(newResults).filter((key) => newResults[key] === false).map((key) => examplesData[taskNumber][key]);
        alert(Количество правильных ответов: ${correctCount}\nПравильные ответы: ${correctList.join(', ')}\nНеправильные ответы: ${incorrectList.join(', ')});
    };
    
    
    return (

<div style={{ maxHeight: "700px", overflowY: "scroll" }}>
            {/* Рендерим кнопки и поля ввода */}
            {renderWordButtons(examplesData[taskNumber])}

            {/* Кнопка для проверки ответов */}
            <button onClick={checkAnswers} style={{maxWidth: '300px'}}>Проверить ответы</button>
        </div>
    );
};

export default InputTaskComponent;

БЛОГ НА HUSL

Обработка двух TextBox как одно

Ответы (1 шт):