javascript - how to use event.target.value in li - Stack Overflow

admin管理员组

文章数量:1397110

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

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

• javascript
• html
• reactjs

Share Improve this question Follow edited Oct 8, 2019 at 7:19 Joseph D. 12.2k44 gold badges3939 silver badges7171 bronze badges asked Oct 8, 2019 at 7:03 Ruyu YouRuyu You 2111 silver badge33 bronze badges 4

• can you put more of your codes here? – Abal Commented Oct 8, 2019 at 7:05
• thanks but edit your question and put your code in there – Abal Commented Oct 8, 2019 at 7:08
• ``` 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; ``` – Ruyu You Commented Oct 8, 2019 at 7:10
• It would be useful if you put this extra code in the question, instead of as a ment. – oftedal Commented Oct 8, 2019 at 7:12

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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;

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/en-US/docs/Web/HTML/Element/li

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

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

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

You should use a custom ponent 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>
    );
  }
}

本文标签： javascripthow to use eventtargetvalue in liStack Overflow