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

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

如何在 React 中輸入值更改時(shí)保留初始狀態(tài)?

如何在 React 中輸入值更改時(shí)保留初始狀態(tài)?

當(dāng)年話下 2023-07-29 15:46:19
我有以下代碼,只是想更新輸入字段更改時(shí)的文本值。import React, { useState } from 'react';const Form = () => {    const initialState = {        name: 'John',        age: 25    };    const [{ name, age }, setFormState] = useState(initialState);    const handleNameChange = (e) => {        setFormState({            name: e.target.value        });    };    const handleAgeChange = (e) => {        setFormState({            age: e.target.value        })    };        return (        <>            <form onSubmit={(e) => e.preventDefault()}>                <label htmlFor='name'>Name: </label>                <input type='text' id='name' name='name' placeholder={name} onChange={handleNameChange} />                <p>The person's name is {name}.</p>                <br />                <label htmlFor='age'>Age: </label>                <input type='text' id='age' name='age' placeholder={age} onChange={handleAgeChange} />                <p>His/her age is {age}.</p>            </form>        </>    )}export default Form;這里有一個(gè)工作示例:https://codesandbox.io/s/react-playground-forked-tskj9 ?file=/Form.js問題是,當(dāng)在姓名字段中輸入值時(shí),年齡字段會(huì)被清除,反之亦然。我知道這可能是由于initialState字段更改后不再有效,但是如何保留一個(gè)字段中的值<input>并<p>在另一個(gè)字段中輸入值?
查看完整描述

2 回答

?
慕尼黑的夜晚無(wú)繁華

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

雖然您可以通過在 中包含其他屬性來(lái)修復(fù)它setFormState,例如:


setFormState({

    name: e.target.value

    age,

});

函數(shù)組件不是類組件 - 如果它們不相關(guān),請(qǐng)隨意將值分離到單獨(dú)的變量中。這將使語(yǔ)法變得更容易:


const Form = () => {

    const [name, setName] = React.useState('John');

    const [age, setAge] = React.useState(25);


    const handleNameChange = (e) => {

        setName(e.target.value);

    };


    const handleAgeChange = (e) => {

        setAge(e.target.value);

    };

    

    return (

        <form onSubmit={(e) => e.preventDefault()}>

            <label htmlFor='name'>Name: </label>

            <input type='text' id='name' name='name' placeholder={name} onChange={handleNameChange} />

            <p>The person's name is {name}.</p>

            <br />

            <label htmlFor='age'>Age: </label>

            <input type='text' id='age' name='age' placeholder={age} onChange={handleAgeChange} />

            <p>His/her age is {age}.</p>

        </form>

    )

}

ReactDOM.render(<Form />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div class="react"></div>


查看完整回答
反對(duì) 回復(fù) 2023-07-29
?
小唯快跑啊

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

在useState鉤子中,屬性不會(huì)像以前在setState類組件的函數(shù)中那樣合并。您必須包含缺失的字段,以將它們保留在對(duì)象中。


setFormState({

   name: e.target.value,

   age,

});


查看完整回答
反對(duì) 回復(fù) 2023-07-29
  • 2 回答
  • 0 關(guān)注
  • 189 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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