Привязка данных в Reactjs - PullRequest
Новая
       12

Привязка данных в Reactjs

0 голосов
/ 18 октября 2018

Я использую 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>;
  }
}

Мне нужноудалить опцию А.Однако optionA также находится в состоянии бабушки и дедушки.Как наиболее эффективно сообщить бабушке и дедушке об удалении optionA в состоянии menuData и optionData?

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Вместо передачи optionData сама передается функция из GrandParant, которая удаляет эту опцию из GrandParant state.Или пропустите оба, если Child нужно будет отрендерить или использовать optionData. 

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 () {
    // delete optionA here from optionData and menuData
  }

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


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

const Child = ({ deleteOptionA }) = (
    <div>
      <button onClick={deleteOptionA}>deleteOptionA</button>
    </div>
);

Теперь вам не нужно дублировать состояние в 2 разных местах, и компонент Child станет намного проще.

0 голосов
/ 18 октября 2018

Создайте обработчик deleteOption в GrandParent и передайте его в 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 изменится, ребенок будет перерисован с новыми реквизитами.

...