React子组件实现输入框清空功能，无需父组件额外代码

现有父组件通过state控制子输入组件的值，需要在子组件内添加清空按钮且父组件无需编写额外代码，但子组件无法直接修改props.value，解决方案如下：

核心思路 #

让子组件兼容受控与非受控模式，通过内部维护本地状态同步父组件传入的value，清空时自动通知父组件更新state，全程无需父组件额外处理。

修改后的子组件代码 #

import React, { InputHTMLAttributes, forwardRef, useState, useEffect } from 'react'

export type Props = InputHTMLAttributes<HTMLInputElement>

const FormInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
  // 初始化本地状态，优先使用父组件传入的value
  const [localValue, setLocalValue] = useState(props.value ?? '')

  // 监听父组件value变化，同步更新本地状态，保证受控模式下的一致性
  useEffect(() => {
    setLocalValue(props.value ?? '')
  }, [props.value])

  // 处理输入变更，同步更新本地状态并调用父组件的onChange
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setLocalValue(e.target.value)
    props.onChange?.(e)
  }

  // 子组件内部实现清空逻辑
  const handleClear = () => {
    setLocalValue('')
    // 模拟ChangeEvent触发父组件onChange，同步更新父组件state
    props.onChange?.({
      target: {
        ...props,
        value: ''
      }
    } as React.ChangeEvent<HTMLInputElement>)
  }

  return (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <input
        ref={ref}
        {...props}
        value={localValue}
        onChange={handleChange}
      />
      <button onClick={handleClear} type="button">清空</button>
    </div>
  )
})

FormInput.displayName = 'FormInput'

export default FormInput

关键点说明 #

• 本地状态同步父组件值：通过useEffect监听props.value变化，确保父组件主动修改值时，子组件输入框能同步更新，避免状态不一致。
• 双向同步输入状态：输入时先更新子组件本地状态，再调用父组件onChange，保证父组件state与子组件状态始终一致。
• 清空逻辑内部闭环：点击清空按钮时，既清空子组件本地状态，又模拟ChangeEvent触发父组件onChange，让父组件state自动更新为空，父组件无需添加任何额外代码。
• 兼容两种模式：若父组件未传入value和onChange，子组件会自动作为非受控组件工作，本地状态完全接管输入值。

内容的提问来源于stack exchange，提问作者xapep