第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會有你想問的

使用 React useState 統(tǒng)一輸入值

使用 React useState 統(tǒng)一輸入值

POPMUISE 2022-10-13 19:17:22
我在一個(gè)表單中有這三個(gè) Quantity 輸入。（其實(shí)可以更動態(tài)地添加，大概15個(gè)或更多。但為了簡單起見，我說的是三個(gè)。）| - | - | Quantity ||---|---|----------|| - | - |    3     || - | - |    4     || - | - |    5     |我想在它們上方添加另一個(gè)輸入以添加單個(gè)值并將它們設(shè)置為相同。| - | - | Quantity ||---|---|----------|| - | - |    3     | <--- This input will set the same value for inputs below|---|---|----------|| - | - |    3     || - | - |    3     || - | - |    3     |但是原來的三個(gè) Quantity 輸入仍然能夠改變每個(gè)值。這是我的嘗試：// 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} />...統(tǒng)一輸入工作，它設(shè)置值。但我無法編輯下面的輸入。我究竟做錯(cuò)了什么？堆棧 - React：v16.13.1，TypeScript：v3.9.5
查看完整描述

3 回答

?
慕斯709654

TA貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊

具有可定制輸入數(shù)量的解決方案：


    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>

            <input onChange={handleValue}/>

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

                {inputs}

            </Fragment>

       </div>

     );


查看完整回答
反對 回復(fù) 2022-10-13
?
繁星點(diǎn)點(diǎn)滴滴

TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超3個(gè)贊

您需要將統(tǒng)一值和剩余值存儲在 2 個(gè)單獨(dú)的狀態(tài)中


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)

}


<input value={valueAll} onChange={handleValue} />

<input value={value.input1} name="input1" onChange={handleEachValue} />

<input value={value.input2} name="input2" onChange={handleEachValue} />

<input value={value.input3} name="input3" onChange={handleEachValue} />

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


查看完整回答
反對 回復(fù) 2022-10-13
?
PIPIONE

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個(gè)贊

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


要更正此問題，您希望每個(gè)值都具有單獨(dú)的狀態(tài)。這可以通過在狀態(tài)中存儲一組值來完成，但為簡單起見，我只是實(shí)現(xiàn)了額外的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 */}

            <input value={unifyValue} onChange={handleUnifyValue} />


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

            <input value={firstValue} onChange={handleFirstValue} />

            <input value={secondValue} onChange={handleSecondValue} />

            <input value={thirdValue} onChange={handleThirdValue} />

        </form>

    )

}

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


查看完整回答
反對 回復(fù) 2022-10-13
  • 3 回答
  • 0 關(guān)注
  • 222 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號