如何在 React 中输入值更改时保留初始状态？

Question

我有以下代码，只是想更新输入字段更改时的文本值。

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>在另一个字段中输入值？

Answer 1

虽然您可以通过在 中包含其他属性来修复它setFormState，例如：setFormState({&nbsp; &nbsp; name: e.target.value&nbsp; &nbsp; age,});函数组件不是类组件 - 如果它们不相关，请随意将值分离到单独的变量中。这将使语法变得更容易：const Form = () => {&nbsp; &nbsp; const [name, setName] = React.useState('John');&nbsp; &nbsp; const [age, setAge] = React.useState(25);&nbsp; &nbsp; const handleNameChange = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; setName(e.target.value);&nbsp; &nbsp; };&nbsp; &nbsp; const handleAgeChange = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; setAge(e.target.value);&nbsp; &nbsp; };&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <form onSubmit={(e) => e.preventDefault()}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label htmlFor='name'>Name: </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='text' id='name' name='name' placeholder={name} onChange={handleNameChange} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>The person's name is {name}.</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label htmlFor='age'>Age: </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='text' id='age' name='age' placeholder={age} onChange={handleAgeChange} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>His/her age is {age}.</p>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; )}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>

Answer 2

在useState钩子中，属性不会像以前在setState类组件的函数中那样合并。您必须包含缺失的字段，以将它们保留在对象中。setFormState({&nbsp; &nbsp;name: e.target.value,&nbsp; &nbsp;age,});