Question

我有一个具有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;

      }  
    }

Answer 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>

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

1 个答案: