React单文件内函数触发与状态传递：按钮控制输入框问题

我想在单个导出给父组件的文件里实现动态更新功能，点击编辑按钮切换显示输入框。现有代码里，AppButtonClick组件能实现按钮文本在“Edit”和“Save”之间切换，但FieldChange组件没法直接引用buttonText状态，尝试用useContext传递状态也没成功，求可行的解决办法。

原代码：

export function AppButtonClick() {
  
    const [buttonText, setButtonText] = useState('Edit');
    
    function handleClick() {
      buttonText === ('Edit') ?  setButtonText('Save') : setButtonText('Edit');
    }
    
    return (
       <Button onClick={handleClick} variant="contained" color="primary" >
            {buttonText}  </Button>
    );
};

export function FieldChange () { 
  
  const [divinformation, divinfo] = useState(buttonText)  
 
  
  divinformation === ('Save') ? 
  divinfo(<form><input type="text" style={{width: 600, height: 40, fontSize: 16}} /></form>)
  : ""
   
     
 return (
     <div >{divinformation}</div>
     );
 };

解决方案1：状态提升（最简洁直接） #

把buttonText状态提升到父组件，通过props传递给两个子组件，让它们共享同一状态、同步更新。

修改后代码示例：

import { useState } from 'react';
import Button from '@mui/material/Button';

// 按钮组件，接收状态和修改函数作为props
export function AppButtonClick({ buttonText, setButtonText }) {
    function handleClick() {
        setButtonText(prev => prev === 'Edit' ? 'Save' : 'Edit');
    }
    
    return (
        <Button onClick={handleClick} variant="contained" color="primary">
            {buttonText}
        </Button>
    );
};

// 输入框组件，接收状态作为props
export function FieldChange({ buttonText }) { 
    // 无需额外维护状态，直接根据父组件传递的buttonText判断显示内容
    return (
        <div>
            {buttonText === 'Save' && (
                <form>
                    <input type="text" style={{width: 600, height: 40, fontSize: 16}} />
                </form>
            )}
        </div>
    );
};

// 父组件中使用示例
function ParentComponent() {
    const [buttonText, setButtonText] = useState('Edit');
    
    return (
        <div>
            <AppButtonClick buttonText={buttonText} setButtonText={setButtonText} />
            <FieldChange buttonText={buttonText} />
        </div>
    );
}

解决方案2：正确使用Context API传递状态 #

如果两个组件层级较深、状态提升不方便，可以用Context共享状态。以下是正确实现步骤：

import { useState, createContext, useContext } from 'react';
import Button from '@mui/material/Button';

// 创建Context
const ButtonTextContext = createContext();

// 创建Context提供者组件
export function ButtonTextProvider({ children }) {
    const [buttonText, setButtonText] = useState('Edit');
    
    const toggleButtonText = () => {
        setButtonText(prev => prev === 'Edit' ? 'Save' : 'Edit');
    };
    
    return (
        <ButtonTextContext.Provider value={{ buttonText, toggleButtonText }}>
            {children}
        </ButtonTextContext.Provider>
    );
}

// 按钮组件，使用Context
export function AppButtonClick() {
    const { buttonText, toggleButtonText } = useContext(ButtonTextContext);
    
    return (
        <Button onClick={toggleButtonText} variant="contained" color="primary">
            {buttonText}
        </Button>
    );
};

// 输入框组件，使用Context
export function FieldChange() { 
    const { buttonText } = useContext(ButtonTextContext);
    
    return (
        <div>
            {buttonText === 'Save' && (
                <form>
                    <input type="text" style={{width: 600, height: 40, fontSize: 16}} />
                </form>
            )}
        </div>
    );
};

// 根组件中使用示例
function App() {
    return (
        <ButtonTextProvider>
            <AppButtonClick />
            <FieldChange />
        </ButtonTextProvider>
    );
}

关键问题说明 #

• 原代码中FieldChange直接引用buttonText是错误的：React组件的状态是独立隔离的，跨组件无法直接访问其他组件的内部状态。
• 原代码中FieldChange用useState(buttonText)初始化状态的逻辑无效：一是buttonText未定义，二是组件挂载后状态只会初始化一次，不会跟随外部状态自动更新。
• 优先推荐使用状态提升方案，代码更简洁易维护；当组件层级复杂时，再考虑Context API。

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