时间戳

首页 > 解决方案 > 在 Reactjs 中绑定数据

javascript - 在 Reactjs 中绑定数据

问题描述

我在我的项目中使用 Reactjs。我在删除子组件中的数据时遇到了一些问题，并注意到 randparent 组件的变化。这是祖父组件的代码：`

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 也处于祖父组件的状态。通知祖父母删除 menuData 和 optionData 状态中的 optionA 的最有效方法是什么？

标签： javascriptreactjsreact-reduxfrontend

解决方案

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

     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>;
      }
    }

在儿童中：

  class Child extends Component {    

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

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

推荐阅读