javascript - get value of list item with click event in React - Stack Overflow

admin管理员组

文章数量:1418437

I have two ponents which displaying
each element of const elementObjects = [{id: 1, Element: "Orange", Weight: 55}, {id:2, Element: "Banana", Mass: 20}]; in an unorderd list I want to log the value of a list item to the console if clicked

return <li onClick={(e)=> console.log(e.target.value)}>{props.value}</li>;

when clicked the eventHandler return 0 instead of Orange how can I get the desired behavior ?

function ListItem(props) {
    // --> displays the data / is reusable
  return <li onClick={(e)=> console.log(e.target.value)}>{props.value}</li>;
}

function ChooseElements() {

  const listItems = elementObjects.map((object) =>
  
    <ListItem key={object.id.toString()} value={object.Element} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}


ReactDOM.render(
  <ChooseElements />,
  document.getElementById('root')
);

I have two ponents which displaying
each element of const elementObjects = [{id: 1, Element: "Orange", Weight: 55}, {id:2, Element: "Banana", Mass: 20}]; in an unorderd list I want to log the value of a list item to the console if clicked

return <li onClick={(e)=> console.log(e.target.value)}>{props.value}</li>;

when clicked the eventHandler return 0 instead of Orange how can I get the desired behavior ?

function ListItem(props) {
    // --> displays the data / is reusable
  return <li onClick={(e)=> console.log(e.target.value)}>{props.value}</li>;
}

function ChooseElements() {

  const listItems = elementObjects.map((object) =>
  
    <ListItem key={object.id.toString()} value={object.Element} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}


ReactDOM.render(
  <ChooseElements />,
  document.getElementById('root')
);

• javascript
• reactjs
• dom-events

Share Improve this question Follow asked May 2, 2021 at 18:06 seemanseeman 11511 silver badge1515 bronze badges 1

• Try props.value (the value of the value prop) instead of e.target.value (the value of the value attribute of the li HTML element, which is unlikely to be anything interesting, since you haven't set it to anything interesting. – Heretic Monkey Commented May 2, 2021 at 18:10

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You don't need e.target. Your value is ing from your props. Your ListItem should look like this to log the value once clicked:

function ListItem(props) {
  return <li onClick={() => console.log(props.value)}>{props.value}</li>;
}

here you go. use props.value for onClick

function ListItem(props) {
  return <li onClick={()=> console.log(props.value)}>{props.value}</li>;
}

Can you use value from props instead of event target?

Something like this:

function ListItem(props) {
  return <li onClick={() => console.log(props.value)}>{props.value}</li>;
}

?

li elements don't specifically have e.target.value So you'll have to console.log props.value

function ListItem(props) {
    // --> displays the data / is reusable
  return <li onClick={(e)=> console.log(props.value)}>{props.value}</li>;
}

You could simply pass the props.value to the onClick event handler and there won't be a need for e.target.value.

本文标签： javascriptget value of list item with click event in ReactStack Overflow