Блог

На прикрепленном рисунке я хочу, чтобы под опцией «Выбрать тип раунда» был добавлен другой компонент, основанный на выбранном типе раунда.

Добавление в один раунд не является проблемой. Но когда я добавляю новый раунд и пытаюсь сделать то же самое для него, компоненты, по сути, одинаковы, но повторяются.

Как вы можете видеть здесь, обе формы либо видны, либо нет.

Я придерживаюсь неправильного подхода, при котором я просто добавляю компонент формы в сопоставленный раунд, и поскольку форма одинакова для каждого раунда, она подключается ко всем формам других раундов.

Чего я хочу, так это чтобы я мог выбирать различные типы раундов и получать соответствующие поля ввода в каждом раунде.

Как видно, как только я нажимаю на другой тип раунда во втором раунде, первый также меняется.

Функция добавления раунда выполнена с использованием компонентов AntDesign.

Что я пытался сделать:

 
    import React, { useState } from "react";
    import { useStore } from "react-redux";
    import { Input, Radio, Form, Button, Space } from 'antd';
    import { MinusCircleOutlined, PlusOutlined } from '@ant- 
    design/icons';
    import "./createQuizPage.css";

    const RoundTypeScheme = ({ type, count }) =>
    {
        console.log(type, count);
        try
        {
            switch(type)
            {
                case "Pounce":
                    return (
                    <div id = {count}>
                        <label>Marks for correct answer (Direct) 
    </label>
                        <Input size = "small" />
                        <label>Marks for incorrect answer (Direct) 
    </label>
                        <Input size = "small" />
                        <label>Marks for correct answer (Pounce) 
    </label>
                        <Input size = "small" />
                        <label>Marks for incorrect answer (Pounce) 
    </label>
                        <Input size = "small" />
                        <hr />
                    </div>
                );
            case "Pounce   Bounce":
            case "Differential":
            case "Buzzer":
            case "Long Visual Connect":
            default:
                return (<></>)
        }
    }
    catch(err)
    {
        console.log(err);
    }
}

    const CreateQuizPage = () =>
    {
        const [type, setType] = useState("");
        const [count, setCount] = useState(0);
        const store = useStore();
        let quiz_name = store.getState().quiz;
        const quiz_rounds = ["Preliminary", "Main"]
        const quiz_sub_rounds = ["Pounce", "Pounce   Bounce", "Buzzer", "Differential", "Long Visual Connect"]

    const roundScores = (e) =>
    {
        setType(e.target.value);
    }

    const addRound = () =>
    {
        setCount(prev => (prev   1));
    }

    return (
        <div id = "createQuizPage">
            <Form
                name="basic"
                className = "createQuizPage__form"
            >
                <h1>Name: {quiz_name}</h1>
                <Form.Item>
                    <label>Choose Quiz Type </label>
                    <Radio.Group
                        options = {quiz_rounds}
                        optionType = "button"
                        buttonStyle = "solid"
                        className = "createQuizPage__type-button"
                    ></Radio.Group>
                </Form.Item>
                <Form.List name="users">
                    {(fields, { add, remove }) => (
                    <>
                        {fields.map(({ key, name, fieldKey, ...restField }) => (
                        <Space key={key} align="baseline" className = "createQuizPage__quiz-round">
                            <Form.Item
                                {...restField}
                                name={[name, 'round_type']}
                                fieldKey={[fieldKey, 'round_type']}
                                rules={[{ required: true, message: 'Missing Quiz Round' }]}
                            >
                                <label>Choose Round Type </label>
                                <Radio.Group
                                    options = {quiz_sub_rounds}
                                    optionType = "button"
                                    buttonStyle = "solid"
                                    onChange = {(e) => roundScores(e)}
                                ></Radio.Group>
                                <RoundTypeScheme type = {type} count = {count}/>
                            </Form.Item>
                            <MinusCircleOutlined onClick={() => remove(name)} />
                        </Space>
                        ))}
                        <Form.Item>
                            <Button onClick={() => {add(); addRound();}} icon={<PlusOutlined />}>
                                Add a Round
                            </Button>
                        </Form.Item>
                    </>
                    )}
                </Form.List>
            </Form> 
        </div>
    )
}

export default CreateQuizPage;
 

Проблема, с которой вы столкнулись, вызвана тем, что вы передаете зависимости типа и представления в качестве реквизитов для фактического компонента, и они все еще реагируют.

Вам нужно либо:

1. Сохраните начальную конфигурацию компонента раунда, а затем, если реквизит изменится, это не изменит пользовательский интерфейс раунда.
2. Держите в компоненте контейнера массив круглых конфигураций, а затем перебирайте их и передавайте каждую круглую конфигурацию компоненту раунда.

Я думаю, что #2 было бы лучше с точки зрения архитектуры и удобочитаемости кода