Не могу передать значение из дочернего компонента в родительский

Question

Не могу передать значение из дочернего компонента в родительский

Рейтинг: 0Ответов: 1Опубликовано: 13.03.2023

Сейчас я пытаюсь добиться следующего поведения: при выборе определенного человека, что бы он добавлялся в состояние selectedMentor. Сейчас selectedMentor хранит null.

Часть кода родительского компонента HourlyRates:

const HourlyRates = () => {
  const [workers,setworkers] = useState(null)
  const [mentorsFromMoodle, setMentorsFromMoodle] = useState(null)
  const [modalActive,setModalActive] = useState(false)
  const [selectedMentor, setSelectedMentor] = useState(null)
  useEffect(()=>{

   
  const handleSelectedMentor = (mentor) => {
    console.log(mentor)
    setSelectedMentor(mentor);
    console.log("родитель")
    console.log(selectedMentor)
  };

  return (
    <>
        
        <Modal active={modalActive} setModalActive={setModalActive}>

          <div onClick={e=> e.stopPropagation()}>

          <label for="cars">Choose a mentor:</label>
            <select onChange={handleSelectedMentor} name="mentors" id="mentors-select">
              {mentorsFromMoodle?.map((item,index) =>(
                  <ModalRow
                  key = {index}
                  index = {index}
                  item = {item}
                  onSelect = {handleSelectedMentor}
                />
                  ) )
              }
            </select>
            <button >add</button>

          </div>
          </Modal>

    </>
  )
}

export default HourlyRates;

Дочерний элемент ModalRow :

import React from 'react'
import axios from "axios";
import { useState,useEffect} from 'react'
const ModalRow = (props) => {

  const handleMentorClick = () => {
    console.log("работает")
    const mentorName = props.item.firstname;
    const mentorLastname = props.item.lastname;
    const mentorEmail = props.item.email;
    const mentor = {fname: mentorName, lname: mentorLastname, mentorEmail: mentorEmail };
    
    props.onSelect(mentor)
  };
  
  return (
    <option onChange={() => handleMentorClick()}   className={"modalRowId-" + props.index} value={props.item.email}>{props.item.firstname}  {props.item.lastname}</option>
  )
}

export default ModalRow

javascript reactjs события jsx

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

В HourlyRates <
Меняете тело функции на получение события onSelect и выбранного значения

const handleSelectedMentor = (event) => {
    console.log(event.target.value)
    setSelectedMentor(mentorsFromMoodle[event.target.value]);
    console.log("родитель")
    console.log(mentorsFromMoodle[event.target.value])
};

Удаляете onSelect из передачи в компонент ModalRow

<ModalRow
    key={index}
    index={index}
    item={item}
/>

В компоненте ModalRow Удаляете функцию handleMentorClick и слушатель события onChange
В качестве value вместо value={props.item.email} задаем индекс элемента value={props.index}

<option className={"modalRowId-" + props.index} value={props.index}>{props.item.firstname}  {props.item.lastname}</option>

И работает!

При смене options будет передан id индекса массива, по которому данные будут добавлены в переменную selectedMentor

Не могу передать значение из дочернего компонента в родительский

Ответы