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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 React 中輸入值更改時保留初始狀態?

如何在 React 中輸入值更改時保留初始狀態?

當年話下 2023-07-29 15:46:19
我有以下代碼,只是想更新輸入字段更改時的文本值。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;這里有一個工作示例:https://codesandbox.io/s/react-playground-forked-tskj9 ?file=/Form.js問題是,當在姓名字段中輸入值時,年齡字段會被清除,反之亦然。我知道這可能是由于initialState字段更改后不再有效,但是如何保留一個字段中的值<input>并<p>在另一個字段中輸入值?
查看完整描述

2 回答

?
慕尼黑的夜晚無繁華

TA貢獻1864條經驗 獲得超6個贊

雖然您可以通過在 中包含其他屬性來修復它setFormState,例如:


setFormState({

    name: e.target.value

    age,

});

函數組件不是類組件 - 如果它們不相關,請隨意將值分離到單獨的變量中。這將使語法變得更容易:


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>


查看完整回答
反對 回復 2023-07-29
?
小唯快跑啊

TA貢獻1863條經驗 獲得超2個贊

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


setFormState({

   name: e.target.value,

   age,

});


查看完整回答
反對 回復 2023-07-29
  • 2 回答
  • 0 關注
  • 179 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號