ReactJS -我可以生成几个表单字段与值属性共享相同的名称，但不相同的值?

Question

经过2天的激烈斗争，我决定第一次在Stack Overflow上发帖:)。

我关心的是:

作为项目的一部分，我想生成一些与数组大小相等的输入字段。例子:

function App() {
const [UseState, setUseState] = useState("");
const array = [0, 1, 2];
const HandleAdding = (e) => {
e.preventDefault;
const returnJson = { UseState };
//rest of the code
};
return (
<div>
{array.map(() => (
<form onSubmit={HandleAdding}>
<input value={UseState} onChange={(e) => setUseState(e.target.value)} />
</form>
))}
</div>
);
}

我们已经知道了这个问题，当在一个字段中插入一个值时，这个相同的值将被插入到与value共享相同UseState的所有其他字段中。对于更具体的问题，下面是CodeSandBox上的一个例子:

https://codesandbox.io/s/adoring-rgb-n0bdk?file=/src/App.js

所以试着填写一个字段，你会注意到这个问题。我尝试了很多方法来解决我的问题，像这样:

https://codesandbox.io/s/blissful-rain-mcol2?file=/src/App.js(我正试图调整代码以解决我的问题)。

我没有放任何东西，以防止它变得太长。那么，你有解决这个问题的办法吗?就我而言，我缺乏想法，并且仍然是React的初学者。提前感谢!^ ^

Answer 1

function App() {
const [UseState, setUseState] = useState({});
const array = [0, 1, 2];
const size = array.length;
const HandleAdding = (e) => {
e.preventDefault;
const returnJson = { UseState };
//rest of the code
};
return (
<div>
{array.map((x) => (
<form onSubmit={HandleAdding}>
<input value={UseState[x]} onChange={(e) => setUseState({...UseState, [x]: e.target.value})} />
</form>
))}
</div>
);
}

您可以通过更改UseState的结构，使其成为具有以下模式的对象，从而轻松解决该问题

UseState = {
0: 'Isaac',
1: 'James',
2: 'John'
}

您需要存储多个值，因此当您检索值时，使用UseState[x]，当您更新时，您需要扩展对象并更新特定属性的值

Answer 2

1. 一般来说，对于表单，您将输入值保存在一个处于状态的对象中，然后在输入更改时使用新值更新该状态。

2. 现在你创建的表单比你需要的多。您甚至不需要form元素，因为input元素实际上不需要它。

3. 用一个对象初始化你的状态

4. map在数组上，而不是数组的长度。

5. 命名你的输入，这样当值改变时，你可以很容易地更新状态。

const { useState } = React;
function Example() {
// Initialise state with an object
const [ data, setData ] = useState({});
// Example input names
const arr = ['name', 'address', 'number'];
// When the input changes, get the name
// and the value, and update the state using
// that information
function handleChange(e) {
const { name, value } = e.target;
setData({ ...data, [name]: value });
}
function handleSubmit() {
console.log(data);
}
function createInputs(arr) {
// `map` over the array and return some JSX
return arr.map(el => {
return (
<label>{el.toUpperCase()}:&nbsp;
<input type="text" name={el} />
</label>
);
});
}
return (
<div onChange={handleChange}>
{createInputs(arr)}
<button onClick={handleSubmit}>Submit</button>
</div>
);
};
// Render it
ReactDOM.render(
<Example />,
document.getElementById("react")
);

label { display: block; }

<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>
<div id="react"></div>