我有一个具有ID和值的按钮,并且根据此ID和值,我根据需要激活了“单击事件”。
我在此按钮上添加了新图像-现在我正在寻找一种方法来向添加的新图像中添加ID和值-但我找不到任何方法。
在下面的代码-我给了2个渲染方法 1.添加图片之前 2.添加图片后(render1)
在render1上(重命名为render并标记其他render方法) 我无法在handleClick方法上获取ID和值。
代码:
class myClass extends React.Component
{
constructor(props)
{
super(props);
}
handleClick(event)
{
const id = event.target.id;
const value = event.target.value;
// do something accourding to the target id and value
}
getElementType()
{
let elementType = null;
const i = this.element;
switch(i)
{
case(1):
elementType = 1;
break;
case(2):
elementType = 2;
break;
case(3):
elementType = 3;
break;
}
}
//render()
//{
// const elementType = this.getElementType();
//
// const itemToRender = items.map((item, i) =>
// <div>
// <button onClick={this.handleClick.bind(this)} id={i} value={elementType}>
// {item.text}
// </button>
// </div>);
// return itemToRender;
// }
// after add the img
render()
{
const elementType = this.getElementType();
const itemToRender = items.map((item, i) =>
<div>
<button onClick={this.handleClick.bind(this)} id={i} value={elementType}>
<img src={item.icon} />
{item.text}
</button>
</div>);
return itemToRender;
}
}
答案 0 :(得分:1)
您可以使用event.currentTarget属性来获取事件处理程序所附加的元素。
handleClick(event)
{
const id = event.currentTarget.id;
const value = event.currentTarget.value;
// do something accourding to the target id and value
}
class App extends React.Component {
constructor(props) {
super(props);
this.items = [1,2,3,4,5];
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
const target = event.currentTarget.id;
console.log(target);
}
render() {
return (
<main>
{
this.items.map((item, i)=>(
<button id={i} key={i} onClick={this.handleClick}>
<img src={item} alt="placeholder"/>
{item}
</button>
))
}
</main>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>