反应-更改子组件状态值

Question

我有一个关于更改父母的孩子状态值的问题。

我的设计如下图所示。选择datagridrow时，行信息将发送到datagrid和父组件。 Datagrid组件将selectedRowId信息保持在其状态，Parent也保持此状态。父组件具有表单，并且当选择一行时，将填充表单元素。保存表单时，我想清除网格中的行选择。但是我找不到如何清除datagrid状态信息（selectedrowId）。

我想使我的datagrid组件与redux隔离，因为我想像打包库一样使用datagrid。我也不想使用参考。

我尝试了几件事，但不能成功。

谢谢您的任何帮助。

Answer 1

我可能会误解这个问题，但是这样的事情行得通吗？

import React from "react";
import ReactDOM from "react-dom";

class A extends React.Component {
  state = {
    items: [0, 1, 2],
    selected: 0
  };

  select = val => {
    this.setState({
      selected: val
    });
  };

  reset = () => {
    this.setState({
      selected: 0
    });
  };

  render() {
    return (
      <React.Fragment>
        <B {...this.state} select={this.select} />
        <button onClick={this.reset}>reset</button>
      </React.Fragment>
    );
  }
}

class B extends React.Component {
  render() {
    return (
      <C
        items={this.props.items}
        select={this.props.select}
        selected={this.props.selected}
      />
    );
  }
}

class C extends React.Component {
  render() {
    const { items, selected } = this.props;

    return items.map(i => (
      <div
        onClick={() => this.props.select(i)}
        style={{ color: i === selected ? "red" : "black" }}
      >
        {i}
      </div>
    ));
  }
}

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

工作示例here。