對于我的示例專案，我正在嘗試在 ReactJs 中進行一些操作，其中我將采用多個值并將它們拆分為兩個或更多物件。我對 reactjs 沒有太多經驗，所以如果您有任何可以幫助我提高 reactjs 技能的示例或網站，或者您可以給我的任何建議，我將不勝感激。如果有什么不明白或需要澄清的地方，請在下方留言。
當我提交時，它只顯示藍色和中等值，這是有道理的，因為我的代碼不允許多值輸入。有什么辦法可以解決這個問題或改進它嗎？我想在每個輸入的兩個多個輸入之后對其進行測驗，因此我想為它構建某種型別的動態多輸入，它不僅管理兩個相同的類別值，如紅色和藍色，而且還處理相同顏色類別的三個輸入。
代碼
import React, { useState } from "react";
import { Button, Form, Grid } from "semantic-ui-react";
function Sample() {
const [attributes, setAttributes] = useState([]);
const [color, setColor] = useState("");
const [size, setSize] = useState("");
const onSubmit = () => {
setAttributes([
...attributes,
{
id: new Date().getTime() attributes.length,
color: color,
size: size,
},
]);
setColor("");
setSize("");
};
console.log(attributes);
return (
<>
<Form onSubmit={onSubmit}>
<h2>Create a Child Attributes:</h2>
<Form.Field>
<Grid columns={2}>
<Grid.Row>
<Grid.Column>
<Form.Input
placeholder="Please Enter Color"
name="color"
label="Color: "
onChange={(event) => {
setColor(event.target.value);
}}
/>
<Form.Input
placeholder="Please Enter Color"
name="color"
label="Color: "
onChange={(event) => {
setColor(event.target.value);
}}
/>
</Grid.Column>
<Grid.Column>
<Form.Input
placeholder="Please Enter Size"
name="size"
label="Size: "
onChange={(event) => {
setSize(event.target.value);
}}
/>
<Form.Input
placeholder="Please Enter Size"
name="size"
label="Size: "
onChange={(event) => {
setSize(event.target.value);
}}
/>
</Grid.Column>
</Grid.Row>
</Grid>
<br />
<Button type="submit" color="teal">
Submit
</Button>
</Form.Field>
</Form>
<table className="ui celled sortable table">
<thead>
<tr>
<th>ID</th>
<th>Color</th>
<th>Size</th>
</tr>
</thead>
<tbody>
{attributes.map(({ id, color, size }) => (
<tr key={id}>
<td>{id}</td>
<td>{color}</td>
<td>{size}</td>
</tr>
))}
</tbody>
</table>
</>
);
}
export default Sample;
代碼沙箱 => https://codesandbox.io/s/affectate-mayer-1ecqw?file=/src/App.js
uj5u.com熱心網友回復：
通常，通過狀態處理物件/陣列需要額外的抽象。在有一個專案陣列的情況下，最佳實踐是為一個物件創建一個子組件并將整個陣列專案傳遞給它，加上回傳一個新物件的 onChange 回呼。
另一個有用的點是使用受控輸入。所以主要的區別是為每個表單部分設定一個初始物件。這是官方解釋https://reactjs.org/docs/forms.html
這是具有以下更改的簡單解決方案：
- 回呼更新為有一個中間件來處理狀態
- 其他狀態鉤子被洗掉（據我了解情況）
- onSubmit 為空，但
attributes狀態為實際
import React, { useState } from "react";
import { Button, Form, Grid } from "semantic-ui-react";
function Sample() {
const [attributes, setAttributes] = useState([{}, {}]);
const onSubmit = () => {
console.log(attributes);
};
const onFieldChange = (index, name, value) => {
setAttributes(
attributes.map((a, i) => (i !== index ? a : { ...a, [name]: value }))
);
};
return (
<>
<Form onSubmit={onSubmit}>
<h2>Create a Child Attributes:</h2>
<Form.Field>
<Grid columns={2}>
<Grid.Row>
<Grid.Column>
<Form.Input
placeholder="Please Enter Color"
label="Color: "
onChange={(event) => {
onFieldChange(0, "color", event.target.value);
}}
/>
<Form.Input
placeholder="Please Enter Color"
label="Color: "
onChange={(event) => {
onFieldChange(0, "size", event.target.value);
}}
/>
</Grid.Column>
<Grid.Column>
<Form.Input
placeholder="Please Enter Size"
label="Size: "
onChange={(event) => {
onFieldChange(1, "color", event.target.value);
}}
/>
<Form.Input
placeholder="Please Enter Size"
label="Size: "
onChange={(event) => {
onFieldChange(1, "size", event.target.value);
}}
/>
</Grid.Column>
</Grid.Row>
</Grid>
<br />
<Button type="submit" color="teal">
Submit
</Button>
</Form.Field>
</Form>
<table className="ui celled sortable table">
<thead>
<tr>
<th>ID</th>
<th>Color</th>
<th>Size</th>
</tr>
</thead>
<tbody>
{attributes.map(({ id, color, size }) => (
<tr key={id}>
<td>{id}</td>
<td>{color}</td>
<td>{size}</td>
</tr>
))}
</tbody>
</table>
</>
);
}
export default Sample;
這是玩代碼的游樂場：https : //codesandbox.io/s/gracious-rgb-suf6k?file=/src/App.js
如果我有任何問題/誤解，請告訴我。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/376522.html
標籤：javascript 数组 反应 json 目的