启用和禁用来自不同文件的开关的按钮

Question

我是react和前端开发的新手，任何帮助都将不胜感激，请不要使堆栈溢出成为一个有毒的地方，笑或关闭tick你认为它太简单或愚蠢。没有问题是愚蠢的

Button存储在文件panel.tsxaSwitch位于notes.tsxtsx文件中button的使能和禁用状态由注释中的switch条件决定。文件。

以下代码是上述问题的简化版本

# notes.tsx
export const AddNotes: React.FC = () => {
const [skipNotes, setSkipNotes] = useState(false);
const onSkipNotes = (checked: boolean) => setSkipNotes(checked);

return (
<div>
<CC.ToggleSwitch checked={skipNotesAndTags} onChange={onSkipNotes} label="Skip notes" changeHighlight />
</div>
);
};

# panel.tsx
export const Panel: React.FC = () => {
<div>
<CC.Button text={'Submit'} disabled={true}/> // How can I disabled/enable it based on skipNotes from note.tsx
</div>

如何禁用/启用按钮基于skipNotes从notes.tsx ?

Answer 1

您需要解除状态。如果你阅读了我所链接的那部分文档，你就会明白;他们解释得很好。

但只是为了尝试和解释，skipNotes的useState钩子应该放在笔记和面板的共同父级中。然后将skipNotes和setSkipNotes作为道具传入。

export const App: React.FC<Props> = ({}) => {
const [skipNotes, setSkipNotes] = useState(false)
return <>
<AddNotes skipNotes={skipNotes} setSkipNotes={setSkipNotes} />
<Panel skipNotes={skipNotes} />
</>
}

export const AddNotes: React.FC = (skipNotes, setSkipNotes) => {
const onSkipNotes = (checked: boolean) => setSkipNotes(checked)
return (
<div>
<CC.ToggleSwitch checked={skipNotes} onChange={onSkipNotes} label="Skip notes" changeHighlight />
</div>
)
}

export const Panel: React.FC = (skipNotes) => {
return (
<div>
<CC.Button text="Submit" disabled={skipNotes}/>
</div>
)
}

Answer 2

你的问题有几个解决方案

1. 来全球化你的状态，最简单的方法是使用useContext钩子
2. 或者只是简单地将状态作为道具从父组件传递给子组件这里有一个react js的例子(而不是我希望那很好)是如何做到的链接