Почему e.target.value возвращает undefined

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

Пытаюсь по клику на элемент получить значение {key.name} и передать его в другую компоненту. Для начала, задача получить e.target.value элемента, не могу разобраться почему получаю undefined, ведь у элемента {key.name} есть значение.

const mainPage = () => {

const handleChange = (e) => {
  const name = e.target.value
  console.log("value: ", name ); 
 }

  return ( 
  <div> 
     {items.map(key => {
    return <div key={key.id} variant="inherit">
    <Box sx={{ width: '100%' }}>
    <Stack spacing={2}>
  <Item>{key.sport_title}</Item>
  <Stack>
  {key.books[0].markets[0].outcomes.map(key => {
    return <Item onClick={handleChange}  key={key.id} value={key.name}> {key.name}
      <Typography >{key.name}</Typography>
      <Typography >{ key.price}</Typography>
     </Item>
  })}
  </Stack>
  </Stack>
  </Box>
    </div>
  })}
    </div>
  )
}
javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Проблема в том, что у элемента Item нет свойства value, поэтому при попытке получить e.target.value вы получаете undefined. можете добавить атрибут data для хранения значения key.name, а затем использовать его в функции handleChange.

const mainPage = () => {

  const handleChange = (e) => {
    const name = e.target.getAttribute('data')
    console.log("value: ", name ); 
  }

  return ( 
    <div> 
      {items.map(key => {
        return (
          <div key={key.id} variant="inherit">
            <Box sx={{ width: '100%' }}>
              <Stack spacing={2}>
                <Item>{key.sport_title}</Item>
                <Stack>
                  {key.books[0].markets[0].outcomes.map(key => {
                    return (
                      <Item 
                        onClick={handleChange}  
                        key={key.id} 
                        data={key.name}
                      > 
                        <Typography >{key.name}</Typography>
                        <Typography >{key.price}</Typography>
                      </Item>
                    )
                  })}
                </Stack>
              </Stack>
            </Box>
          </div>
        )
      })}
    </div>
  )
}