在反應中拆分字串并作為物件回傳給用戶

我是新手，我正在嘗試調整我正在構建的小型 Web 應用程式上的一項功能，以了解其中的技巧。本質上，我試圖在/n（新行）上拆分配方的方法，并將陣列中的每個元素存盤為拆分物件，用戶將通過一系列步驟將其查看。

例如。

Put the pasta in the water
Heat the oil
Cook the sauce

應該根據新行拆分為陣列，放入物件并回傳給用戶，如下所示：

Step1
Put the pasta in the water

Step 2
Heat the oil

Step 3
Cook the sauce

我正在努力實作這個邏輯——我認為我把它放在了正確的位置。任何指導將不勝感激。

 const [methodStepsList, setMethodStepsList] = useState([])
  const [methodStepObject, setMethodStepObject] = useState({
    step_number: '',
    step_instructions: '',
  })
[...]
  const handleMethodChange = (e) => { //captures the inputted text
    let key = e.target.name
    let value = e.target.value
    console.log(`${key}:${value}`)
    let prev = { ...methodStepObject }
    prev[key] = value
    setMethodStepObject(prev)
  }

  return (
    <div>
      <div className="recipe-form-container">
        <form className="recipe-form">
         [...]
          {/* recipe method logic */}
          <div className="recipe-blurb recipe-element">
            <label>Recipe Method</label>
            <span className="method-span">
              <textarea
                rows="5"
                name="step_instructions"
                type="text"
                placeholder="Method will be split up based on new lines"
                onChange={(e) => handleMethodChange(e)}
              ></textarea>
              <button
                onClick={(e) => {
                  setMethodStepList(()
                   => [
                    e.split(/\r?\n/) //is supposed to split up the inputted text 
                  ])
                  e.preventDefault()
                }}
              >
                Add Method
              </button>
            </span>
          </div>

uj5u.com熱心網友回復：

• 創建一個狀態來保存 textarea 的值：const [instructionsText, setInstructionsText] = useState("");
• 在 textarea 中設定更改值：<textarea ... onChange={(e) => setInstructionsText(e.target.value)} value={instructionsText} />
• 為您決議的陣列創建另一個狀態：const [instructionsArray, setInstructionsArray] = useState([]);
• 在您的按鈕單擊（它實際上是一個表單提交）上防止默認的表單提交行為并通過讀取您的 textarea 狀態并用換行符分割字串來設定陣列狀態：const handleSubmit = (e) => { e.preventDefault(); setInstructionsArray(instructionsText.split(/\r?\n/)); };

完整代碼：

https://codesandbox.io/s/small-night-tr7e1g

實際上，您甚至不需要第二個狀態，因為您可以直接將字串從 textarea 拆分為陣列并像這樣呈現：

{instructionsText.split(/\r?\n/).map((instruction, index) => {
    return <div>{`Step ${index   1}: ${instruction}`}</div>;
})}

uj5u.com熱心網友回復：

您可以簡單地拆分字串并像這樣回傳物件：-

"Put the pasta in the water\nHeat the oil\nCook the sauce".split('\n').map((a, index) => ({[`Step ${index   1}`] : a}))

uj5u.com熱心網友回復：

實際上，您只需要一個變數來存盤輸入文本的值并控制邏輯以顯示基于它的步驟。

這是一個作業示例，當您輸入 textarea 并按 Enter 換行時，將在 textarea 下方顯示一個步驟：

import { useState } from "react";

import "./styles.css";

export default function App() {
  const [methodStepsList, setMethodStepsList] = useState([]);

  const handleMethodChange = (e) => {
    setMethodStepsList(e.target.value.split("\n"));
  };

  return (
    <div className="App">
      <div>
        <textarea
          rows="5"
          name="step_instructions"
          type="text"
          placeholder="Method will be split up based on new lines"
          onChange={(e) => handleMethodChange(e)}
        ></textarea>
      </div>
      <div>
        {methodStepsList?.map((item, idx) => (
          <>
            <div>
              <label>{`Step ${idx   1}:`}</label>
              <br />
              <span>{`${item}`}</span>
            </div>
            <br />
          </>
        ))}
      </div>
    </div>
  );
}

標籤：反应

上一篇：為什么我的reactredux狀態不會導致重新渲染？

下一篇：npm錯誤！缺少腳本：“開始”