Javascript 什么'；这是改变React中另一个组件状态的正确方法

我有两个组件，一个包含复选框，另一个是按钮。其目的是前一个组件让我们称之为行，如果复选框被更改，编辑按钮将自动启用，如果复选框不再勾选，编辑按钮将自动禁用。我本来打算添加onclick事件监听器，但最近我读了一些关于状态的文章，认为这可能是一个更好的主意

这是我的按钮：

class EditButton extends React.Component {
    constructor() {
        super();
        this.state = {
            clickable: false
        }
    }

    render() {
        const {clickable} = this.state

        if (clickable) {
            return (
                <Button className="button-amber">Edit</Button>
            )
        } else {
            return (
                <Button disabled>Edit</Button>
            )
        }
    }
}

class EditButton扩展了React.Component{
构造函数（）{
超级（）；
此.state={
可点击：false
}
}
render（）{
const{clickable}=this.state
如果（可点击）{
返回(
编辑
)
}否则{
返回(
编辑
)
}
}
}

这是我的行组件

class MyRow extends React.Component {
    constructor(props) {
        super(props);
        this.payload = this.props.payload;
    }

    render() {
        const toRoute = "/foo/" + this.props.payload["id"]
        const tags = []
        for (const [index, value] of this.props.payload["tags"].entries()) {
            tags.push(<Badge>{value}</Badge>)
        }
        return (
            <tr className="white-text">
                <td>
                    <Form.Group>
                        <Form.Check type="checkbox"/>
                    </Form.Group>
                </td>
                <td>
                    STUFF
                </td>
                <td>
                    {this.payload["label"]}
                </td>
                <td>
                    {tags}
                </td>
                <td>

                </td>
            </tr>
        );
    }
}

类MyRow扩展React.Component{
建造师（道具）{
超级（道具）；
this.payload=this.props.payload；
}
render（）{
const toRoute=“/foo/”+this.props.payload[“id”]
常量标记=[]
for（此.props.payload[“tags”].entries（）的常量[索引，值]）{
tags.push（{value}）
}
返回(
东西
{this.payload[“label”]}
{tags}
);
}
}

我的主应用程序呈现可能是这样的

render(){
<div>
 <EditButton/>
 <Table>
  <MyRow payload=.../>
  <MyRow payload=.../>
 </Table>
</div>
}

render（）{
}

---

我的意图是，如果选中了复选框，请检查所有复选框的状态以确保选中了某些内容，如果选中了任何复选框，则将EditButton clickable状态更改为true。正确的方法是什么？通常我会使用事件监听器和单个选择器，但考虑到我正在使用react，我觉得应该有一种更直接的方法来修改该组件的状态，react的内置状态管理非常有限，这就是为什么很多用户喜欢使用Redux来处理更复杂的状态，因为有很多控件交互。就个人而言，我使用Proxys使用自己的状态管理

class MyRow extends React.Component {
    constructor(props) {
        super(props);
        this.payload = this.props.payload;
    }

    render() {
        const toRoute = "/foo/" + this.props.payload["id"]
        const tags = []
        for (const [index, value] of this.props.payload["tags"].entries()) {
            tags.push(<Badge>{value}</Badge>)
        }
        return (
            <tr className="white-text">
                <td>
                    <Form.Group>
                        <Form.Check type="checkbox"/>
                    </Form.Group>
                </td>
                <td>
                    STUFF
                </td>
                <td>
                    {this.payload["label"]}
                </td>
                <td>
                    {tags}
                </td>
                <td>

                </td>
            </tr>
        );
    }
}

但是您可以通过道具在组件之间传递

setState

，下面我创建了一个名为

state

的变量，用于跟踪每个组件的

useStates

。这样就允许在组件之间进行独立的setState调用

我在这里也使用了React钩子，而不是基于类的钩子，但两者的概念是相同的

功能按钮（{state}）{
const butState=React.useState（false）；
常量[butEnabled]=butState；
state.butState=butState；
返回按钮；
}
函数行（{state，Row}）{
const rowState=React.useState（false）；
const[checked，setChecked]=行状态；
state.rows[row]=rowState；
函数toggleChecked（）{
state.rows[row][0]=！已选中；
state.butState[1]（state.rows.some（b=>b[0]）；
setChecked（state.rows[row][0]）；
}
返回
}
功能页（）{
常量状态={
行：[]
}
返回
}
ReactDOM.render(
,
document.querySelector（“#mount”）
React的内置状态管理非常有限，这就是为什么很多用户喜欢使用Redux来处理更复杂的状态，因为有很多控件交互。就个人而言，我使用Proxys使用自己的状态管理

但是您可以通过道具在组件之间传递
setState
，下面我创建了一个名为
state
的变量，用于跟踪每个组件的
useStates
。这样就允许在组件之间进行独立的setState调用

我在这里也使用了React钩子，而不是基于类的钩子，但两者的概念是相同的


功能按钮（{state}）{
const butState=React.useState（false）；
常量[butEnabled]=butState；
state.butState=butState；
返回按钮；
}
函数行（{state，Row}）{
const rowState=React.useState（false）；
const[checked，setChecked]=行状态；
state.rows[row]=rowState；
函数toggleChecked（）{
state.rows[row][0]=！已选中；
state.butState[1]（state.rows.some（b=>b[0]）；
setChecked（state.rows[row][0]）；
}
返回
}
功能页（）{
常量状态={
行：[]
}
返回
}
ReactDOM.render(
,
document.querySelector（“#mount”）
在多个组件之间共享
状态基本上有两种方法：

将
状态
转换为父组件
使用React上下文或类似Redux的
状态
框架外部存储
状态

对于您的特定用例，我建议使用第一个选项。决定何时使用每个选项的一个好方法是确定
状态是同级组件的本地状态还是全局可见状态。这意味着并非你的应用程序的每个部分都需要集中管理

使用您的示例，我创建了以下代码段来展示它的工作原理：


class按钮扩展React.Component{
render（）{
const{onClick，disabled}=this.props
返回(
按钮
)
}
}
类行扩展了React.Component{
render（）{
const{checked，onChange}=this.props
返回(
)
}
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
勾选：假
}
this.handleCheckboxChange=this.handleCheckboxChange.bind（this）
this.handleButtonClick=this.handleButtonClick.bind（this）
}
HandleCheckBox更改（e）{
这是我的国家({
选中：e.target.checked
})