时间戳

首页 > 解决方案 > 在 React 中更改另一个组件状态的正确方法是什么

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 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。这样做的正确方法是什么？通常我会使用事件侦听器和单独的选择器，但鉴于我正在使用 react 感觉应该有一种更直接的方法来修改该组件的状态

标签： javascriptreactjs

解决方案

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

但是您可以setState通过 props 在组件之间传递 's，下面我创建了一个名为 var 的 var state，用于跟踪useStates每个组件的 。然后，这允许组件之间的独立 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"/>

推荐阅读