[英]how to use event.target.value in li
当我在反应中使用<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;
值为 0
但
click = (event) => {
console.log(event.target.value);
};
render() {
return (
<li value="1" onClick={this.click}>A</li>
);
}
值为 1
我不知道为什么我把字符串放在 li 的值中,它不能正确,但是如果我把数字放在 li 的值中,它可以正确
阅读您的示例并对其进行一些解释,我认为您要做的是:
在列表元素中显示 som 值。
单击列表元素时,对某些内容使用相同的值。
我认为您正在寻找的解决方案是将该值直接传递给处理 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;
您还可以使用对象数组和 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 标签值仅采用 integer 参数,e.target.value 会将您的字符串值覆盖为数值。
Li标签的文档中说的很清楚,下面附上链接。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/li
您必须将事件传递给 function
click = (event) => {
console.log(event.target.value);
};
render() {
return (
<button value="a" onClick={event => this.click(event)}>A</button>
);
}
这可能不是最好的方法(使用data
属性),但下面的代码应该可以工作。 这里还有一个关于为什么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>
);
}
这不是标准化的。 value 属性只能用于 input 元素和 textarea 元素以及自定义组件。
您应该使用自定义组件来执行此操作。
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.