代码之家 › 专栏 › 技术社区 › Yanshof

如何为带图像的按钮添加ID和值?

reactjs html5 html

-1

Yanshof · 技术社区 · 6 年前

我有一个有id和value的按钮,根据这个id和value我可以根据需要激活我的“点击事件”。

我在这个按钮上添加了新图像-现在我正在寻找一种方法将id&value添加到我添加的新图像中-但是我找不到任何方法。

在下面的代码中-我给出了两个呈现方法一。添加图像之前 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;

      }  
    }

1 回复 | 直到 6 年前

Agney Sidharth yadav 6 年前

你可以用 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>