动态创建的buttonclick在react js中不起作用

Question

我在javascript函数中动态创建了一个button元素，然后为该按钮添加了一个onclick事件。但在我按下按钮后，我得到这个错误Uncaught ReferenceError: removeQuestionis not defined(removeQuestionis是我的函数名)

这是我在js函数

中创建的按钮

const addQuestions = () => {
const removeBtn = '<a color="primary" onClick={removeQuestion}> x</a>';
window.document.body.insertAdjacentHTML('beforeend', removeBtn);
};

这个函数被onclick

调用

const removeQuestion = () => {
console.log('test')
};

Answer 1

ReactJS

请仔细阅读React文档中的ref和DOM部分。

React正在使用虚拟DOM。

export default function App() {
const removeBtns = ['x1', 'x2'];
const removeQuestion = () => {
console.log('test');
};
return (
<div className='container'>
{removeBtns.map((x) => (
<a key={x} href={'#!'} onClick={removeQuestion}>
{x}
</a>
))}
</div>
);
}

---

HTML

尝试onClick="removeQuestion()"或onClick={removeQuestion()}

html中onclick接受的值是点击时执行的javascript语句。

javascript中onclick接受的值是点击时执行的回调函数。

const removeBtn1 = '<a onClick={removeQuestion()}> x1 </a>';
const removeBtn2 = '<a onClick="removeQuestion()"> x2 </a>';
const removeQuestion = () => {
console.log('test')
};
window.document.body.insertAdjacentHTML('afterbegin', [removeBtn1, removeBtn2]);

也可以试试EventListener。

const removeBtn1 = '<a class="btn"> x1 </a>';
const removeBtn2 = '<a class="btn"> x2 </a>';
window.document.body.insertAdjacentHTML('afterbegin', [removeBtn1, removeBtn2]);
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('click', () => {
console.log('test');
});
});

Answer 2

这是insertAdjacentHTML的问题，你可以使用ReactDOM.render

let input = React.createElement("input",{className:"questionTextInput",name:"textInputQuestion[]"},null);
ReactDOM.render(input,questionPreview);

Answer 3

这是insertAdjacentHTML的问题，我使用React.createElement，渲染后使用ReactDOM.render

let input = React.createElement("input",{className:"questionTextInput",name:"textInputQuestion[]"},null);
ReactDOM.render(input,questionPreview);