如何使用 react.js 使用换行符呈现用户的输入（存储在数组中）？

Question

我一直在尝试使用换行符呈现 {ingredients}，每次用户按下 Enter 并键入另一种成分时。我一直在一行中获取所有用户的输入，例如grapeonionlettuce 我不确定添加代码的内容、位置或方式，以便它有换行符 - 也尝试使用 CSS，通过引用类名 return-ingredients-list 并使用 white-space 等，但无济于事。请帮忙，如果可能的话，提前致谢。

//import { useState} from "react";
//import {Paper} from "@material-ui/core";
const {useState} = React;

const CRBUploadRecipe = () => {
    const [recipeName, setRecipeName] = useState("");
    const [selectedFile, setSelectedFile] = useState(undefined);
    const [ingredients, setIngredients] = useState([]);

    const handleEnterKeyPress = (e) => {
        if(e.which === 13) {
            const input = document.getElementById("ingredients");
            setIngredients([input.value, ...ingredients])
            console.log(ingredients)
        }
    };
    return (
        <div>
        {/*<Paper elevation={12}>*/}
            <div className="upload-recipe">
                <form>
                    <label htmlFor="form-title" className="form-title">
                        Share to the Community <br/>
                        <input id="recipe-name" type="text" value={recipeName} placeholder="Recipe name"
                        onChange={e => setRecipeName(e.target.value)}
                        />
                    </label>
                    <label htmlFor="upload-image" className="upload-image">
                        Upload image <br/>
                        <input id="upload-image" type="file" value={selectedFile}
                        onChange={e => setSelectedFile(e.target.files[0])}
                        />
                    </label>
                    <label htmlFor="ingredients" className="ingredients">
                        Ingredients <br/>
                        <input id="ingredients" type="text" placeholder="Write ingredients"
                        onKeyPress={handleEnterKeyPress} />
                    </label>
                    <div className="return-ingredients-list">
                        {ingredients}
                    </div>
                </form>
            </div>
        {/*</Paper>*/}
        </div>
    );
};

ReactDOM.render(
  <div>
    DEMO
    <CRBUploadRecipe />
  </div>,
  document.getElementById("rd")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="rd" />
<div id="ingredients"></div>

Answer 1

首先不要在 React 应用中使用 document.getElementById("ingredients")。其次，您可以将每种成分放在段落中或 div;

import { useState} from "react";
import {Paper} from "@material-ui/core";

const CRBUploadRecipe = () => {
const [recipeName, setRecipeName] = useState("");
const [selectedFile, setSelectedFile] = useState(undefined);
const [ingredients, setIngredients] = useState([]);

const handleEnterKeyPress = (e) => {
    if(e.which === 13) {
        const input = e.target; // your handler already has access to input;
        setIngredients((prev) => [input.value, ...prev])
        console.log(ingredients)
    }
}
return (
    <Paper elevation={12}>
        <div className="upload-recipe">
            <form>
                <label htmlFor="form-title" className="form-title">
                    Share to the Community <br/>
                    <input id="recipe-name" type="text" value={recipeName} placeholder="Recipe name"
                    onChange={e => setRecipeName(e.target.value)}
                    />
                </label>
                <label htmlFor="upload-image" className="upload-image">
                    Upload image <br/>
                    <input id="upload-image" type="file" value={selectedFile}
                    onChange={e => setSelectedFile(e.target.files[0])}
                    />
                </label>
                <label htmlFor="ingredients" className="ingredients">
                    Ingredients <br/>
                    <input id="ingredients" type="text" placeholder="Write ingredients"
                    onKeyPress={handleEnterKeyPress} />
                </label>
                <div className="return-ingredients-list">
                    {ingredients.map((ingridient, id) => (<p key={id}>{ingridient}</p>)}
                </div>
            </form>
        </div>
    </Paper>
);
}

   export default CRBUploadRecipe;

如何使用 react.js 使用换行符呈现用户的输入（存储在数组中）？

How can I render user's input (which is stored in an array) with LINE BREAKS using react.js?

css

arrays

render

reactjs

use-state