javascript - 在Reactjs中绑定(bind)数据

Question

我在我的项目中使用 Reactjs。我在删除子组件中的数据时遇到一些问题，并注意到 randparent 组件中的更改。这是祖 parent 组件的代码:`

class GrandParent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menuData: [
        { menu: "1", optionName: "A" },
        { menu: "2", optionName: "A" },
        { menu: "3", optionName: "B" },
        { menu: "4", optionName: "B" },
        { menu: "5", optionName: "B" }
      ],

      optionData: [{ optionName: "A" }, { optionName: "B" }]
    };
  }
  render() {
    <div>
      <Parent optionData={optionData} />
    </div>;
  }
}

这是父组件的代码:

class Parent extends Component {
  render() {
    <div>
      <Child optionData={this.props.optionData} />
    </div>;
  }
}

接下来是子组件:

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: []
    };
  }

  componentDidMount() {
    this.setState({
      options: this.props.optionData
    });
  }

  deleteOptionA = () => {
    let { options } = this.state;
    newOption = options.filter(option => option.optionName !== "A");
    this.setState({ options: newOption });
  };

  render() {
    <div>
      <button onClick={this.deleteOptionA}>deleteOptionA</button>
    </div>;
  }
}

我需要删除选项A。然而，optionA 也处于祖 parent 组件的状态。通知祖 parent 删除menuData和optionData状态中的optionA的最有效方法是什么？

Answer 1

在 GrandParent 中创建 deleteOption 处理程序并将该处理程序传递给 Child。单击删除按钮时，您将调用在 props 中传递的处理程序，以从父级状态中删除该选项。

     class GrandParent extends Component {
      constructor(props) {
        super(props);
        this.state = {
          menuData: [
            { menu: "1", optionName: "A" },
            { menu: "2", optionName: "A" },
            { menu: "3", optionName: "B" },
            { menu: "4", optionName: "B" },
            { menu: "5", optionName: "B" }
          ],

          optionData: [{ optionName: "A" }, { optionName: "B" }]
        };
      }

      deleteOptionA = () => {
        let { options } = this.state;
         newOption = options.filter(option => option.optionName !== "A");
        this.setState({ options: newOption });
      };

      render() {
        <div>
          <Parent optionData={optionData} deleteOptionA={this.deleteOptionA}/>
        </div>;
      }
    }

在 child 中:

  class Child extends Component {    

  render() {
    <div>
      <button onClick={this.props.deleteOptionA}>deleteOptionA</button>
    </div>;
  }
}

现在，当 GrandParent 的状态发生更改时，您不需要管理子组件中的状态，子组件将使用新的 props 重新渲染。