You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在React函数组件中将两个重置state的函数合并为一个?

React 多状态重置函数合并方案

你可以通过给重置函数传入字段标识的方式合并两个重置逻辑,以下是实现代码,同时修复了你原有代码中缺失的useState声明、属性拼写错误、冗余符号等问题:

方案1:保留独立state,合并重置函数

import React, {useState} from 'react'

function ChangeableItem(props) {
    // 补充缺失的state声明
    const [number, setNumber] = useState(props.number)
    const [describe, setDescribe] = useState(props.describe)

    // 合并后的重置函数,通过传入的field参数判断要重置的字段
    const resetField = (field) => {
        if (field === 'number') {
            setNumber('')
        } else if (field === 'describe') {
            setDescribe('')
        }
    }
  
    return (
    <li className='day-item'>
        <div 
            className='number amount' 
            onFocus={() => resetField('number')} 
            contentEditable="true"
        >
            {number}
        </div>
        <div 
            className='number name'  
            onFocus={() => resetField('describe')} 
            contentEditable="true"
        >
            {describe}
        </div>
        <div className="">
            {icons}
        </div>
    </li>
    )
}

方案2:合并为单个对象state(更适合多字段场景)

如果后续可编辑字段会继续增加,推荐把同组状态合并为一个对象管理,重置逻辑会更简洁,新增字段不需要额外修改重置函数的判断分支:

import React, {useState} from 'react'

function ChangeableItem(props) {
    // 合并两个字段到同一个state对象
    const [formState, setFormState] = useState({
        number: props.number,
        describe: props.describe
    })

    const resetField = (field) => {
        setFormState(prev => ({
            ...prev,
            [field]: ''
        }))
    }
  
    return (
    <li className='day-item'>
        <div 
            className='number amount' 
            onFocus={() => resetField('number')} 
            contentEditable="true"
        >
            {formState.number}
        </div>
        <div 
            className='number name'  
            onFocus={() => resetField('describe')} 
            contentEditable="true"
        >
            {formState.describe}
        </div>
        <div className="">
            {icons}
        </div>
    </li>
    )
}

内容的提问来源于stack exchange,提问作者Richardson

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.07 14:09:02