動態創建的按鈕 onclick 在反應 js 中不起作用

Question

我在我的 javascript 函數中動態創建一個按鈕元素，然后向該按鈕添加一個 onclick 事件。 但是在我按下那個按鈕后，我得到了這個錯誤Uncaught ReferenceError: removeQuestionis not defined (removeQuestionis is my function name )

這是我在 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

反應JS

仔細閱讀 React 文檔的Refs 和 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);