如何在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
相关产品推荐
相关产品推荐

