首頁猿問使用 React useState...

使用 React useState 統一輸入值

JavaScript

POPMUISE 2022-10-13 19:17:22

我在一個表單中有這三個 Quantity 輸入。（其實可以更動態地添加，大概15個或更多。但為了簡單起見，我說的是三個。）| - | - | Quantity ||---|---|----------|| - | - | 3 || - | - | 4 || - | - | 5 |我想在它們上方添加另一個輸入以添加單個值并將它們設置為相同。| - | - | Quantity ||---|---|----------|| - | - | 3 | <--- This input will set the same value for inputs below|---|---|----------|| - | - | 3 || - | - | 3 || - | - | 3 |但是原來的三個 Quantity 輸入仍然能夠改變每個值。這是我的嘗試：// form.tsx... const [value, setValue] = useState(0 || undefined) const handleValue = (e: any) => setValue(e.target.value) ... {/* Unify input to set the same value in inputs below */} <input value={value} onChange={handleValue} /> {/* Without onChange, input will be set readOnly automatically, so I tried adding something */} <input value={value} onChange={() => undefined} /> <input value={value} onChange={(e: any) => e.target.value} /> <input value={value} onChange={null} /> <input value={value} onChange={false} />...統一輸入工作，它設置值。但我無法編輯下面的輸入。我究竟做錯了什么？堆棧 - React：v16.13.1，TypeScript：v3.9.5

查看完整描述

3 回答

慕斯709654

TA貢獻1840條經驗獲得超5個贊

具有可定制輸入數量的解決方案：

const NUM_INPUTS = 3;

const range: string[] = (Array.from(Array(NUM_INPUTS).keys()).map(i => ''));

const [value, setValue] = useState<string | undefined>(undefined);

const [values, setValues] = useState(range);

// Handle unified value

const handleValue = (e: any) => {

setValue(e.target.value);

setValues(range.fill(e.target.value));

}

// Handle individual inputs

const handleOtherValue = (e: any) => {

values[+e.target.name] = e.target.value;

setValues(values);

}

// Create array of input elements

const inputs = range.map((_, i) =>

(<input key={i} name={i.toString()}

defaultValue={values[i]} onChange={handleOtherValue}/>));

// Important to use defaultValue so inputs are mutable

return (

<div>

<Fragment key={value}> {/* important for React to auto update these inputs */}

{inputs}

</Fragment>

</div>

);

反對回復 2022-10-13

繁星點點滴滴

TA貢獻1803條經驗獲得超3個贊

您需要將統一值和剩余值存儲在 2 個單獨的狀態中

const [valueAll, setValueAll] = useState(0)

const [value, setValue] = useState({

input1: 0,

input2: 0,

input3: 0

})

const handleValue = (e: any) => {

setValueAll(e.target.value)

let newValue = value;

Object.keys(newValue).forEach(key => {

newValue[key] = e.target.value

});

setValue(newValue)

}

你可以在這里查看代碼和框

反對回復 2022-10-13

PIPIONE

TA貢獻1829條經驗獲得超9個贊

問題似乎來自所有具有相同value（value狀態）的輸入。這為您提供了一種簡單的方法來一次更新所有值，但如您所見，不允許單獨更新它們。他們可以改變的唯一方法是在統一值setValue()中的事件中調用if 。onChange

要更正此問題，您希望每個值都具有單獨的狀態。這可以通過在狀態中存儲一組值來完成，但為簡單起見，我只是實現了額外的useState鉤子。

export const Form = () => {

const [unifyValue, setUnifyValue] = useState(0);

const [firstValue, setFirstValue] = useState(0);

const [secondValue, setSecondValue] = useState(0);

const [thirdValue, setThirdValue] = useState(0);

const handleUnifyValue = (e: any) => {

setUnifyValue(e.target.value);

setFirstValue(e.target.value);

setSecondValue(e.target.value);

setThirdValue(e.target.value);

}

const handleFirstValue = (e: any) => {

setFirstValue(e.target.value);

}

const handleSecondValue = (e: any) => {

setSecondValue(e.target.value);

}

const handleThirdValue = (e: any) => {

setThirdValue(e.target.value);

}

return (

<form>

{/* Unify input to set the same value in inputs below */}

{/* Without onChange, input will be set readOnly automatically, so I tried adding something */}

</form>

)

}

如果我能讓狀態數組正常工作，我會用那個例子來更新它。這將允許超過 3 個輸入，并減少對這么多useState和handleXValue行的需求。

反對回復 2022-10-13

3 回答
0 關注
214 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 React useState 統一輸入值

使用 React useState 統一輸入值

3 回答

添加回答