Блог

Главная - Вопросы по программированию - Как редактировать несколько полей редактора ввода текста отдельно в react js

Как редактировать несколько полей редактора ввода текста отдельно в react js

#javascript #arrays #reactjs #typescript #object

#javascript #массивы #reactjs #машинописный текст #объект

Вопрос:

Я работаю над react js и typescript. Я разрабатываю образовательное приложение, в котором администратор может добавлять один вопрос mcq и группу вопросов mcq. Я использовал ckeditor для написания вопроса mcq. когда я добавляю вопрос mcq, его мутация работает нормально. но в групповом вопросе это не работает. Когда я добавляю групповой вопрос, это комбинация двух вопросов mcq. каждый объект вопроса mcq имеет свою собственную пару ключ-значение. итак, в массиве имеется несколько объектов типа вопроса mcq. Теперь проблема в том, что когда я пишу что-то в одном объекте, его значение присваивается во всех других ключах объекта. предположим, я пишу что-то в question_text объекта object1, это значение также присваивается в question_text объекта object2, object3…. Другими словами, функция onchange применима к каждому объекту в массиве. Я не понимаю, как я могу это исправить. Пожалуйста, помогите мне в этом.

 const handleMcqQuestionChange = (
    value: string | number | string[],
    name: string,
    index: number
  ) => {
    if (questionType === "MultipleChoice") {
    //@ts-ignore
    questionCopy[name as keyof McqQuestionInput] = value;
    console.log("name and index", name, index)
    
    setQuestion(questionCopy);
    }
    else{
      
       //@ts-ignore
    groupQuestion[0][name as keyof McqQuestionInput] = value;
    console.log("group questions index", index)
    // const groupQuestionData =  [...mcqQuestions, questionCopy]
    // console.log("mcq questions ", mcqQuestions);
    
    setGroupQuestion(groupQuestion);
    console.log("group questions", groupQuestion)
    }
  };
  
    const handleChange = (
    value: string | number,
    name: string,
    _index: number
  ) => {
    if (questionType === "MultipleChoice") {
      console.log("index mcq", _index)
      const questionCopy: any = { ...question };
      questionCopy[name] = value;
      setQuestion(questionCopy);
    }
     else {
      console.log("index group", _index)
      const groupQuestionCopy: any = [ ...groupQuestion ];
      groupQuestionCopy[_index][name] = value;
      setGroupQuestion(groupQuestionCopy);
      console.log("group question copy", groupQuestionCopy)
    }
  }; 
 <Card>
            <CardContent>
              <CustomCKEditor
                label="Instructions"
                handleChange={(_event: any, content: any, _index: any) =>
                  handleInstructionsChange(
                    content amp;amp; content.getData(),
                   "instruction",
                   _index
                  )
                }
                initialState={question.questionText}
                minHeight={500}
              />
            </CardContent>
          </Card>
          {groupQuestion amp;amp;
            groupQuestion.map((_questions, index) => (
              <Card>
                <CardContent>
                  <CustomCKEditor
                    label="Question"
                    handleChange={(_event: any, content: any) =>
                      handleMcqQuestionChange(
                        content amp;amp; content.getData(),
                        "questionText",
                        index
                      )
                    }
                    initialState={question.questionText}
                    minHeight={500}
                  />

                  {question.options?.map((option: string, index: number) => (
                    <CustomCKEditor
                      label={`Option ${index   1}`}
                      handleChange={(_event: any, content: any) =>
                        handleOptionChange(content amp;amp; content.getData(), index)
                      }
                      initialState={option}
                      key={index}
                    />
                  ))}

                  <Typography variant="body1" style={{ marginTop: 10 }}>
                    Correct Option
                  </Typography>
                  <RadioGroup
                    row
                    name="correctOption"
                    value={groupQuestion[index].correctOption}
                    onChange={(_e, value) => {
                      // console.log(value, "value");
                      handleChange(Number(value), "correctOption", index);
                    }}
                  >
                    {question.options?.map((_option: string, index: number) => (
                      <FormControlLabel
                        value={index   1}
                        control={<Radio />}
                        label={`options ${index   1}`}
                      />
                    ))}
                  </RadioGroup>
                  <Fab size="small" color="primary">
                    <AddIcon onClick={handleAdd} />
                  </Fab>
                  <CustomCKEditor
                    handleChange={(_event: any, content: any) =>
                      handleMcqQuestionChange(
                        content amp;amp; content.getData(),
                        "hint",
                        index
                      )
                    }
                    label="Hint"
                    initialState={question?.hint}
                  />
                  <CustomCKEditor
                    handleChange={(_event: any, content: any) =>
                      handleMcqQuestionChange(
                        content amp;amp; content.getData(),
                        "solution",
                        index
                      )
                    }
                    label="Solution"
                    initialState={question?.solution}
                  />
                </CardContent>
              </Card>

Комментарии:

1. Я попытался запустить ваш фрагмент кода, но получил несколько ошибок. Можете посмотреть?

2. Я не предоставил полный код для запуска здесь. Он содержит различные компоненты и большой код, поэтому я не могу привести здесь весь код. Я предоставляю только некоторую часть кода. Если вы хотите, я буду рад встретиться с вами. Пожалуйста, поделитесь подробностями вашей встречи. Я поделюсь всем кодом целиком.