Question

当前，我在React中有一个页面，允许用户单击按钮。单击该按钮时，将调用一个函数，该函数将在页面上的一个div内创建一些html。我希望创建的html包含一个按钮，单击该按钮时会调用另一个函数（该函数只会在浏览器控制台上打印一些内容）。这是我的代码：

callFunction() {
    console.log('Button Added')
}

addHTML() {
    document.getElementById('insertHTML').insertAdjacentHTML('beforeend', 
    '<button onclick="'+this.callFunction()+'" class=btn btn-info btn-block mt-2>Print</button>')
   }

render () {
    return (
        <div>
           <div id='insertHTML'>
           </div>
                <button onClick={()=> this.addHTML()} 
                 className='btn btn-success btn-block mt-2'>
                Add button</button>
        </div>
    )
}

现在，当创建按钮时，该函数将在渲染时立即打印到控制台，但是单击时不执行任何操作。我希望它在创建html时不会自动运行，而仅在单击时运行。

谢谢

Answer 1

您已经在渲染时调用了该方法。改变这个 onclick="'+this.callFunction()+'"

到

onclick="'+this.callFunction+'"

使用insertAdjacentHTML向按钮添加onclick函数

1 个答案: