代码之家 › 专栏 › 技术社区 › one-hand-octopus

在React中输入值改变时如何保持初始状态?

reactjs javascript

one-hand-octopus · 技术社区 · 4 年前

我有下面的代码,只想更新输入字段上的文本值。

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

问题是,在name字段中输入值时,age字段被清除,反之亦然。我知道这可能是因为 initialState 在字段中更改后不再有效,但如何在其中保留值 <input> 和 <p> 当输入另一个?

2 回复 | 直到 4 年前

CertainPerformance 4 年前

而你可以通过把另一个属性包含在 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>

kind user Faly 4 年前

在 useState 钩子属性不会像以前那样合并在一起 setState 类组件中的函数。您必须包含缺少的字段,才能将它们保留在对象中。

setFormState({
   name: e.target.value,
   age,
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前