在React中更改另一个组件状态的正确方法是什么

Question

我有两个组件，一个包含复选框，另一个是按钮。其目的是前一个组件让我们称之为行，如果复选框被更改，编辑按钮将自动启用，如果复选框不再勾选，编辑按钮将自动禁用。我本来打算添加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 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>
        );
    }
}

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

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

我的意图是，如果单击了复选框，检查所有复选框的状态以确保选中了某些内容，如果选中了任何复选框，则将EditButton可单击状态更改为true。这样做的正确方法是什么？通常我会使用事件侦听器和单独的选择器，但是考虑到我使用的是反应，感觉应该有一个更直接的方法来修改该组件的状态

Answer 1

在多个组件之间共享状态基本上有两种方法：

1. 将状态转换为父组件。
2. 使用React Context或像Redux这样的state框架在外部存储state。

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

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

class Button extends React.Component {
  render() {
    const  {onClick, disabled} = this.props
    return (
      <button onClick={onClick} disabled={disabled}>
        Button
      </button>
    )
  }
}

class Row extends React.Component {
  render() {
    const {checked, onChange} = this.props
    return (
      <input type="checkbox" checked={checked} onChange={onChange} />
    )
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      checked: false
    }
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this)
    this.handleButtonClick = this.handleButtonClick.bind(this)
  }

  handleCheckboxChange(e) {
    this.setState({
      checked: e.target.checked
    })
  }

  handleButtonClick() {
    console.log("Clicked")
  }

  render() {
    const {checked} = this.state
    return (
      <div>
        <Row checked={checked} onChange={this.handleCheckboxChange} />
        <Button disabled={!checked} onClick={this.handleButtonClick} />
      </div>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

html lang-html prettyprint-override"><script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"/>

Answer 2

React的内置状态管理非常有限，这就是为什么很多用户喜欢使用Redux来处理更复杂的状态，因为有很多控件交互。就个人而言，我使用Proxys使用自己的状态管理。

但是您可以通过props在组件之间传递setState，下面我创建了一个名为state的var，它跟踪每个组件的useState。这样就可以在组件之间进行独立的setState调用。

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

function Button({state}) {
  const butState = React.useState(false);
  const [butEnabled] = butState;
  state.butState = butState;
  return <button
     disabled={!butEnabled}
  >Button</button>;
}

function Row({state, row}) {
  const rowState = React.useState(false);
  const [checked, setChecked] = rowState;
  state.rows[row] = rowState;
 
  function toggleChecked() {
     state.rows[row][0] = !checked;
     state.butState[1](state.rows.some(b => b[0]));
     setChecked(state.rows[row][0]);
  }
  
  return <div>
    <input value={checked} type="checkbox" onChange={toggleChecked}/>
  </div>
}


function Page() {
  const state = {
    rows: []
  }
  return <div>
    <Button state={state}/>
    <Row state={state} row={1}/>
    <Row state={state} row={2}/>
  </div>
}


ReactDOM.render(
  <Page/>,
  document.querySelector('#mount'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="mount"/>