我需要制作大量inputs并將這些資料傳輸到服務器，我認為最好的解決方案是將這些選項的所有選項inputs寫入一個arrayof objects，但我遇到了一個事實，我無法得到所有我inputs的作業。請幫幫我
const test = [
{id: 1,state: 'city'},
{id: 2,state: 'language'},
{id: 3,state: 'brand'},
{id: 4,state: 'shop'},
]
const Auth = () => {
const [description, setDescription] = useState({city: "", language: "", brand: "", shop: ""});
const handleClick = async (event: any) => {
await store.update(description.city, description.brand);
};
const update = async (e: ChangeEvent<HTMLInputElement>) => {
setDescription({
...description,
city: e.target.value
});
};
return (
<>
{test.map(({ state, id}) => (
<TextField
key={id}
label={state}
id={state}
autoComplete="off"
variant="outlined"
className={styles.textFieldAuth}
helperText={state}
value={description.city}
onChange={update}
/>
))}
<Button
className={styles.saveButton}
variant="contained"
color="inherit"
id="login"
onClick={handleClick}
>
Save
</Button>
</>
)
}
uj5u.com熱心網友回復：
將要更新的鍵和值都傳遞給update函式：
const update = (key: string, value: string) => {
setDescription({
...description,
[key]: value,
});
};
{test.map(({ state, id }) => (
<TextField
key={id}
label={state}
id={state}
autoComplete="off"
variant="outlined"
className={styles.textFieldAuth}
helperText={state}
value={description.city}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
update(state, e.target.value)
}
/>
))}
uj5u.com熱心網友回復：
如果你想讓它動態，你必須發送變數保存到你的更新方法并使用描述[狀態]檢索你的值
<TextField
key={id}
label={state}
id={state}
autoComplete="off"
variant="outlined"
className={styles.textFieldAuth}
helperText={state}
value={description[state]}
onChange={(e)=>update(e, state)}
/>
const update = async (e: ChangeEvent<HTMLInputElement>, state) => {
setDescription({
...description,
[state]: e.target.value
});
};
uj5u.com熱心網友回復：
您為每個輸入發送到 TextField description.city。正確的道具是這樣的：
<TextField
key={id}
label={state}
id={state}
autoComplete="off"
variant="outlined"
className={styles.textFieldAuth}
helperText={state}
value={description[state]}
onChange={update}
/>
查看value道具的變化。
此外，您只是更新功能中的更新城市。您必須使更新函式適應您傳遞給它的值。如果你通過了城市，那么它應該更新城市，如果是語言，那么語言等等。
總的來說，這不是實作輸入的好方法。我只是建議你一個一個地做，然后給每個 TextField 發送它對應的值和一個單獨的 setState 。
但只是為了舉例。您可以通過將狀態值傳遞給Update函式來做到這一點。
所以你的函式看起來像這樣：
const update = async (e: ChangeEvent<HTMLInputElement>, state) => {
setDescription((description) => {
...description,
[state]: e.target.value
});
};
現在您只需要確保在 TextField 組件中呼叫 時onChange，將事件傳遞給它，e并且state您從 props 接收到該事件。
注意：如果您想在 setState 本身中使用狀態變數的值，請向它傳遞一個回呼函式，就像我在setDescription
uj5u.com熱心網友回復：
我認為首先你需要你的配置資料來嘗試和你正在構建的元素緊密匹配。所以而不是{ id, state }使用{ id, type, name }.
（這可能不會對您的示例產生巨大影響，因為您專門使用了一個TextField組件，但如果您使用的是原生 HTML 控制元件，您可以添加不同的輸入型別，如數字、電子郵件、日期等，并且您的 JSX 可以處理它容易地。）
其次，正如我在評論中提到的，您不需要這些功能async- 例如，沒有“之后”代碼，handleClick因此不需要await任何東西。
所以這是一個基于您的代碼的作業示例。注意：我已經洗掉了 Typescript（因為代碼段無法理解語法），以及對您正在使用的 UI 組件的參考（因為我不知道它們來自哪里）。
const { useState } = React;
// So, lets pass in out inputs config
function Example({ inputs }) {
// I've called the state "form" here as it's a little
// more meaningful
const [form, setForm] = useState({});
// `handleSave` is no longer `async`, and for the
// purposes of this example just logs the updated
// form state
function handleSave() {
console.log(form);
// store.update(form);
}
// Also no longer `async` `handleChange` destructures
// the name and value from the changed input, and updates
// the form state - a key wrapped with `[]` is a dynamic key
// which means you can use the value of `name` as the key value
function handleChange(e) {
const { name, value } = e.target;
setForm({ ...form, [name]: value });
}
// In our JSX we destructure out the id, name, and
// type properties from each input object in the config
// and apply them to the various input element properties.
return (
<div>
{inputs.map(input => {
const { id, name, type } = input;
return (
<input
key={id}
type={type}
name={name}
placeholder={name}
value={form[name]}
onChange={handleChange}
/>
);
})}
<button onClick={handleSave}>Save</button>
</div>
);
}
// Our updated config data
const inputs = [
{ id: 1, type: 'text', name: 'city' },
{ id: 2, type: 'text', name: 'language' },
{ id: 3, type: 'text', name: 'brand' },
{ id: 4, type: 'text', name: 'shop' }
];
ReactDOM.render(
<Example inputs={inputs} />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/513831.html
標籤：javascript反应