[英]how to use event.target.value in li
when i use event.target.value in <ul><li></li>...</ul>
in react ,i cannot get correct value.当我在反应中使用<ul><li></li>...</ul>
中的 event.target.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值为 0
but但
click = (event) => {
console.log(event.target.value);
};
render() {
return (
<li value="1" onClick={this.click}>A</li>
);
}
value is 1值为 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我不知道为什么我把字符串放在 li 的值中,它不能正确,但是如果我把数字放在 li 的值中,它可以正确
Reading your example, and interpreting it a bit, I think that what you're trying to do is:阅读您的示例并对其进行一些解释,我认为您要做的是:
Have som value displayed inside a list element.在列表元素中显示 som 值。
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:我认为您正在寻找的解决方案是将该值直接传递给处理 onClick 的 function:
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:您还可以使用对象数组和 map function 来获得与值列表相同的效果,同时区分显示值和您传入的值,如您的示例:
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. Li 标签值仅采用 integer 参数,e.target.value 会将您的字符串值覆盖为数值。
It is said clearly in the Li tag's docs, link is attached below. Li标签的文档中说的很清楚,下面附上链接。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/lihttps://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/li
You have to pass event to the function您必须将事件传递给 function
click = (event) => {
console.log(event.target.value);
};
render() {
return (
<button value="a" onClick={event => this.click(event)}>A</button>
);
}
It might not be the best way of doing it (using data
attribute) but the code bellow should work.这可能不是最好的方法(使用data
属性),但下面的代码应该可以工作。 there is also a thorough explanation on why value
doesn't work for <li />
here: How to get value from <li> tag这里还有一个关于为什么value
对<li />
不起作用的详尽解释: 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>
);
}
This is not standardized.这不是标准化的。 The value attribute should only be used for input elements and textarea elements and custom components. value 属性只能用于 input 元素和 textarea 元素以及自定义组件。
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.