在反应中拆分字符串并将 return 作为对象提供给用户

Question

我是 React 新手，我正在尝试调整我正在构建的小型 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>

Answer 1

您可以像这样简单地拆分字符串和 return 对象：-

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

Answer 2

创建一个状态来保存文本区域的值：const [instructionsText, setInstructionsText] = useState("");
设置文本区域更改时的值：<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>;
})}

Answer 3

实际上，您只需要一个变量来存储输入文本的值并根据它控制显示步骤的逻辑。

这是一个工作示例，当您在文本区域中键入并按回车键换行时，文本区域下方将显示一个步骤：

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>
  );
}

在反应中拆分字符串并将 return 作为对象提供给用户

split string in react and return as objects to the user

reactjs