在输入新输入时停止重新渲染元素

Question

我是React的新手。我在React中写一些简单的挑战。我创建了一个输入字段，然后在新的段落中呈现输入值。但是，当我在输入字段中键入新文本时，第一个呈现的元素也会发生变化。每次在输入字段中键入内容时，如何阻止第一个元素发生更改？

import React, { useState } from 'react';
import './css&sass/main.css';
function Main() {
const [ item, setItem ] = useState("");
const [ showItem, setShowItem ] = useState(false);
const inputTargetValue = (e) => {
setItem(e.target.value)
}
function onSubmit(e) {
e.preventDefault()
console.log(item)
}
const showData = (
<p>
{item}
</p>
)
return (
<form className='main--container' onSubmit={onSubmit}>
<input type="text" className='data--input' placeholder='Text input' value={item} onChange={inputTargetValue}></input>
<button className='data--button' onClick={() => setShowItem(true)}>Add item</button>
{showItem ? showData : true}
</form>
)    
};
export default Main;

Answer 1

基于下面提到的假设：

1. 用户可以添加一个或多个item
2. 这些item呈现在用户输入的正上方
3. 有一个Add Item按钮将向显示器添加一个项目
4. 有一个form，提交后将console.log项目列表
5. 对于未来的扩展，表单的提交可能用于将数据发送到其他地方(可能是后端等(

下面的代码片段可能是一个可能的解决方案：

代码段

const {useState} = React;
// React function to render items and
// accept user-input for new items
const AddItems = () => {
// declare variables that need useState hook
// first, the item that will be rendered to hold the input
const [item, setItem] = useState('');
// a list of items that will be rendered at the top
const [itemsList, setItemsList] = useState([]);
// method to handle change to input
const handleInputChange = e => setItem(e.target.value);
// handle add button click (update items-list,
// reset item to empty, and prevent default)
const handleAddBtnClick = (e) => setItemsList(
prev => ([...prev, item]),
setItem(''), e.preventDefault()
);
// handle form-submit button click event
const handleSubmit = (e) => {
e.preventDefault();
// send the list of items for further processing
console.log(
'form-submit clicked... sending items-list: ',
itemsList.join()
);
};

return (
<div class='outerContainer'>
{itemsList && itemsList.length > 0 && (
<div class='itemsListContainer'>
{itemsList.map(
(itm, idx) => (
<div key={idx} class='itemContainer'>
<p>{itm}</p>
</div>
)
)}
</div>
)}
<form onSubmit={handleSubmit}>
<div class='userInputOuter'>
<input
value={item}
onChange={handleInputChange}
/>
<button onClick={handleAddBtnClick} >
Add Item
</button>
<button>Submit</button>
</div>
</form>
</div>
);
};
ReactDOM.render(
<div>
<h4>DEMO</h4>
<AddItems />
</div>,
document.getElementById('react')
);

.outerContainer { background-color: #BBBBEE }
.itemsListContainer { border: 2px solid #EE6666 }
.userInputOuter {
padding: 10px 25px;
display: flex;
align-items: center;
justify-content: space-evenly;
}

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

解释在上面的代码段中以注释的形式提供。

观察仔细阅读OP问题中的代码

• showItem(最初设置为false(在按钮点击&保持不变
• 这意味着，一旦用户单击按钮，使用showData渲染的item(即与input中的CCD_完全相同(将显示为shown/
• 因此，当用户更改输入时，将显示实时更新的showData的item

需要的是一种容纳多个项目的方式。在代码片段中，这是通过使用itemsList实现的。