how to use event.target.value in li

Question

when i use event.target.value in <ul><li></li>...</ul> in react ，i cannot get correct value.

import React from 'react';

class NewComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  click = (event) => {
    console.log(event.target.value);
  };

  render() {
    return (
      <li value="a" onClick={this.click}>A</li>
    );
  }
}

export default NewComponent;

value is 0

but

click = (event) => {
    console.log(event.target.value);
  };

  render() {
    return (
     <li value="1" onClick={this.click}>A</li>
    );
  }

value is 1

I don't know why I put string in li's value, it cannot get correct,but if i put number in li's value, it can get correct

Answer 1

Reading your example, and interpreting it a bit, I think that what you're trying to do is:

1. Have som value displayed inside a list element.

2. Use that same value for something when the list element is clicked on.

I think the solution you're looking for then is passing that value directly to the function handling the onClick:

import React from 'react';

class NewComponent extends React.Component {

  click = (value) => {
    console.log(value);
  };

  render() {
    const myValue = "a";

    return (
      <li onClick={ ()=> this.click(myValue) }>{myValue}</li>
    );
  }
}

export default NewComponent;

You can also use an array of objects and a map function for having the same effect with a list of values, while differentiating between the display value and the value you've passed in, as in your example:

import React from 'react';

class NewComponent extends React.Component {

  click = (value) => {
    console.log(value);
  };

  render() {
    const myValues = [
      {display: "A", value: "a"},
      {display: "B", value: "b"},
      {display: "C", value: "c"}
    ];

    return (
      <ul>
        {myValues.map( 
          (value, i) => (<li onClick={ ()=> this.click(value) } key={i} >{value.display}</li>) 
        )}
      </ul>
    );
  }
}

export default NewComponent;

Answer 2

Li tag value only takes integer argument and e.target.value will override your string value to a numerical value.

It is said clearly in the Li tag's docs, link is attached below. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

Answer 3

You have to pass event to the function

click = (event) => {
    console.log(event.target.value);
  };

  render() {
    return (
      <button value="a" onClick={event => this.click(event)}>A</button>
    );
  }

Answer 4

It might not be the best way of doing it (using data attribute) but the code bellow should work. there is also a thorough explanation on why value doesn't work for <li /> here: How to get value from <li> tag

click = (event) => {
    console.log(event.currentTarget.dataset.id);
  };

  render() {
    return (
     <li data-id="1" onClick={this.click}>A</li>
    );
  }

Answer 5

This is not standardized. The value attribute should only be used for input elements and textarea elements and custom components.

You should use a custom component to do this.

const Li = (props) => <li onClick={()=>props.onClick(props.value)}>A</li>

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  click = (value) => {
    console.log(value);
  };

  render() {
    return (
      <Li value="a" onClick={this.click}>A</Li>
    );
  }
}