如何访问和修改 reactjs 组件的状态答案

【问题标题】：How to access and modify state of reactjs component如何访问和修改 reactjs 组件的状态
【发布时间】：2021-03-11 09:23:38
【问题描述】：

我的问题是通过事件处理程序修改 react js 组件属性。

export default interface WordInputProps {
    onWordChange:(word:string) => void
    firstLetter:string
    disabled?:boolean
}

这是我的组件道具。我需要通过单击按钮来更改布尔值。

这就是我调用组件的方式

<WordInput disabled={false} key={category.id} firstLetter={currentLetter} onWordChange={(word:string) => console.log(category.name + ": ", word)} />

如何通过此按钮更改布尔值？

<button onClick={() =>

【问题讨论】：

按钮是在 WordInputComponent 中还是在父级中？
我假设您指的是disabled 道具？ disabled 属性值从何而来？与disabled 值相关的按钮在哪里？持有disabled 值的组件（可能处于状态？）还需要传递一个回调函数（可以传递给按钮）来切换这个布尔值。
按钮在父级中。这就是为什么我问如何从父按钮切换禁用的雕像
是的，我指的是残疾专业人士。我不知道这个值是从哪里来的。这就是为什么我把它作为一个非强制性变量。如果有一种方法可以通过按钮从父级获取它的值，我是所有解决方案的接受者
请包含所有相关代码，因为父组件代码在这里很重要。一旦我们看到这个状态所在的位置，创建一个函数来更新那个状态的值的任何应该是一件小事。

标签： javascript reactjs next.js

【解决方案1】：

创建一个state 并为其创建一个更新函数：

// Define State
const [disabled, toggleDisabled] = React.useState(false);

// Exchange Booelan for state
<WordInput
  disabled={disabled}
  key={category.id}
  firstLetter={currentLetter}
  onWordChange={(word: string) => console.log(category.name + ": ", word)}
/>;

// Update state
<button onClick={() => toggleDisabled(prevState => !prevState)}>Toggle</button>;

【讨论】：

除了这个小细节，一切正常。感谢您的帮助