1

Пытаюсь по клику на элемент получить значение {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>
  )
}
4
  • 1
    e.target это тот объект, по которому нажали. Видимо у него нет value.
    – SwaD
    9 фев в 19:42
  • 1
    Вроде выглядит нормально. Продебажте код и посмотрите что попадает в value компонента Item
    – T0xee.n17
    9 фев в 19:54
  • Кликаю конкретно по item, на котором есть value 9 фев в 20:05
  • Может вам поможет этот ответ в дебаге
    – SwaD
    9 фев в 20:10

1 ответ 1

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>
  )
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.