React：如何从子组件修改父组件布尔变量以控制保存按钮

要实现子组件标签变化时启用父组件的保存按钮，核心思路是让子组件在标签添加/删除时通过回调函数通知父组件，父组件收到通知后更新保存按钮的启用状态。以下是具体实现步骤：

1. 改造子组件 TagsHandler #

给子组件新增一个onTagsChange回调props，用于在标签列表变化时通知父组件。同时优化setTags的写法，用函数式更新减少不必要的依赖：

import React, { useCallback, useEffect, useRef, useState } from 'react'
import ReactTags from 'react-tag-autocomplete'

const TagsHandler = ({ tagPlaceholder, suggestions, onTagsChange }) => {
  const [tags, setTags] = useState([])
  const reactTags = useRef()

  const onDelete = useCallback(
    (tagIndex) => {
      setTags(prevTags => {
        const newTags = prevTags.filter((_, i) => i !== tagIndex)
        // 触发回调，把最新标签列表传给父组件
        onTagsChange(newTags)
        return newTags
      })
    },
    [onTagsChange]
  )

  const onAddition = useCallback(
    (newTag) => {
      setTags(prevTags => {
        const newTags = [...prevTags, newTag]
        // 触发回调，把最新标签列表传给父组件
        onTagsChange(newTags)
        return newTags
      })
    },
    [onTagsChange]
  )

  useEffect(() => {
    // 优化：不要直接修改原suggestion对象，创建新数组避免副作用
    const updatedSuggestions = suggestions.map(suggestion => ({
      ...suggestion,
      disabled: tags.some(tag => tag.id === suggestion.id)
    }))
    // 如果需要同步更新父组件的suggestions，可以额外添加回调，这里保留原有逻辑
  }, [tags, suggestions])

  return (
    <ReactTags
      ref={reactTags}
      tags={tags}
      suggestions={suggestions}
      onDelete={onDelete}
      onAddition={onAddition}
      placeholderText={tagPlaceholder}
    />
  )
}

export default TagsHandler

2. 改造父组件 #

父组件需要传递onTagsChange回调，并维护保存按钮的启用状态：

import React, { useState } from 'react'
import TagsHandler from './TagsHandler'

const ParentComponent = () => {
  const [isSaveEnabled, setIsSaveEnabled] = useState(false)
  // 示例标签建议数据，根据实际情况替换
  const [suggestions] = useState([
    { id: 1, name: 'React' },
    { id: 2, name: 'JavaScript' },
    { id: 3, name: 'TypeScript' }
  ])

  const handleTagsChange = (newTags) => {
    // 只要标签有变化，就启用保存按钮
    setIsSaveEnabled(true)
    // 可选：如果需要精确判断（比如和初始标签对比），可以这样写：
    // const initialTags = []; // 你的初始标签数组
    // setIsSaveEnabled(JSON.stringify(newTags) !== JSON.stringify(initialTags))
  }

  const handleSave = () => {
    // 这里写你的保存逻辑
    console.log('保存标签')
    // 保存完成后可以重置按钮状态
    setIsSaveEnabled(false)
  }

  return (
    <div>
      <TagsHandler
        tagPlaceholder="输入标签..."
        suggestions={suggestions}
        onTagsChange={handleTagsChange}
      />
      <button onClick={handleSave} disabled={!isSaveEnabled}>
        保存标签
      </button>
    </div>
  )
}

export default ParentComponent

核心要点 #

• 子组件通过onTagsChange回调将最新标签状态传递给父组件，父组件据此更新保存按钮的启用状态。
• 使用setTags的函数式更新（prevTags => newTags）可以避免在useCallback中依赖tags，减少组件不必要的重渲染。
• 如果需要更精细的状态控制（比如只有当标签和初始状态不同时才启用按钮），可以在父组件的回调里对比新旧标签数组。

内容的提问来源于stack exchange，提问作者Gian Marco Pane