如何在地圖函式REACTwordpress中使用地圖函式

我正在使用 React 創建一個 wordpress 插件 - 在此之前從未真正使用過 React，所以我可能誤解了一些重要的事情，但這就是我想要實作的目標：你有一個按鈕可以為測驗創建一個問題然后對每個按鈕，您可以添加多個解決方案：

DOMquestions = questions.map((question) =>

    <div>
        <div>
            {question.qIdTitle}
        </div>
        <div>
            Type: {question.qTypeTitle}
        </div>
        <div>
            Question title
            <input type={"text"} onChange={question.title = handleTextInputChange}></input>
        </div>
        <div>
            Question description
            <input type={"text"} onChange={question.desc = handleTextInputChange}></input>
        </div>
        <button onClick={() => question.addS(question)}>Add a solution</button>
        <div>
        {
                question.solutions.map((solution) =>
                    {
                        return <div>Solution data and fields appear here</div>
                    }

                )
        }
        </div>
    </div>
);

console.log(DOMquestions);
ReactDOM.render(<div class='w-100'>{DOMquestions}</div>, qc);

這個想法是每個 Function 物件都有一個包含解決方案物件的陣列

addS 函式將一個新的解決方案物件推送到陣列 - 所以我已經有了我的陣列問題是我應該如何在螢屏上渲染它提前謝謝

uj5u.com熱心網友回復：

您犯了多個錯誤，讓我們一一回顧：

1. 從 React 18 開始，該render方法已被棄用，取而代之的是createRoot方法，您可以這樣實作它：

const DOMquestions = () => <div>...</div>; 
const root = ReactDOM.createRoot(qc);
root.render(
  <DOMquestions />
);

2. 最好讓你的 mainDOMquestions成為一個功能組件，以便使用任何反應功能，如狀態、回呼等

const DOMquestions = () => {
 return (
  // ...
 )
}

3. 在反應中映射陣列時，您必須使用key屬性，這有助于反應跟蹤哪些專案已更改。

questions.map((question) => (
 <div key={question.qIdTitle}>
  {/* ... */}
 </div>
)

4. 您的輸入更改事件寫入不正確，我不確定您要實作什么，但如果我將重寫它，我將useCallback用于輸入更改，它看起來像這樣。也是<input />自閉合標簽，你不必使用</input>

const handleTitleInputChange = React.useCallback(event => {
  question.title = event.target.value;
}, []);

return (
  <input value={question.title} onChange={handleTitleInputChange} />
)

最后，讓我們將所有這些放在一個地方：

const DOMquestions = () => {
  const handleTitleInputChange = React.useCallback((event, question) => {
    question.title = event.target.value;
  }, []);

  const handleDescInputChange = React.useCallback((event, question) => {
    question.desc = event.target.value;
  }, []);

  return (
    questions.map((question) =>
      <div key={question.qIdTitle}>
        <div>
          {question.qIdTitle}
        </div>
        <div>
          Type: {question.qTypeTitle}
        </div>
        <div>
          Question title
          <input value={question.title} onChange={event => handleTitleInputChange(event, question)} />
        </div>
        <div>
          Question description
          <input value={question.desc} onChange={event => handleDescInputChange(event, question)} />
        </div>
        <button onClick={() => question.addS(question)}>Add a solution</button>
        <div>
          {question.solutions.map((solution) => (
            <div key={solution.id}>Solution data and fields appear here</div>
          ))}
        </div>
      </div>
    )
  )
}

const root = ReactDOM.createRoot(qc);
root.render(
  <DOMquestions />
);

uj5u.com熱心網友回復：

1-將“問題”陣列置于狀態。

2-制作一個函式“updateQuestions”來更新狀態中的問題陣列

3- 在此處添加陣列索引“DOMquestions = questions.map((question, index)”

4- 將問題物件的索引發送到 onClick 上的此函式。“onClick={() => updateQuestions(index)}”

5-現在在 updateQuestions 通過這個索引從“問題”陣列中獲取問題物件，例如

questionsArray = {...questions} const question = questionsArray[index]

并將問題物件添加到函式 .adds questionsArray[index].addS(question)

6- 現在用這個新的 questionArray setQuestions([...questionsArray]) 更新問題狀態

標籤：javascript反应WordPressjsx

上一篇：呼叫函式B時如何執行python函式A？

下一篇：從插件頁面wordpress中洗掉插件資訊