Question

所以我知道这个问题已经问过几次了，一般的让步是道具已经传递给孩子时就不能改变。我在这里遇到的情况是，基本上我在不同的文件中具有不同的onClick函数，该文件使用innerHTML更新id =“ movie-header”，DOMSubtreeModified和componentDidUpdate检测更改并将新的属性传递给子项“ Ebay” 。

所以这里的问题是，如何在moviemodalwindow（Ebay的父级）中对状态进行每次更改后，如何使Ebay组件更新其状态并利用新值

MovieModalWindow.js

import React from "react";
import "../MovieGo.css";
import Ebay from "../Store/Ebay";

class MovieModalWindow extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 1
    };
  }
  componentDidMount() {
    var element = document.getElementById("movie-header");
    element.addEventListener("DOMSubtreeModified", this.myFunction(element));
    var name = this.state.name + 1;
    this.setState({ name: [...this.state.name, name] });
  }

  myFunction = input => event => {
    this.setState({ name: input.innerHTML });
  };
  componentDidUpdate(prevProps, prevState) {
    if (prevState.name != this.state.name) {
      window.localStorage.setItem("keyword", this.state.name);
    }
  }

  render() {
    return (
      <div id="myModal" class="modal">
        <div class="modal-content">
          <span onClick={onClose} class="close">
            &times;
          </span>
          <h1 id="movie-header" />
          <div className="middle-window">
            <div className="left">
              <Ebay id="ebay" keyword={this.state.name} />
            </div>
          </div>
          <h3>PLOT</h3>
          <p id="moviedetails" />
        </div>
      </div>
    );
  }
}

export default MovieModalWindow;

Ebay.js文件

import React from "react"

class Ebay extends React.Component{
  constructor(){
    super();
    this.state={
      data:[],
    }
  }
  componentWillUpdate(prevProps, prevState){
    if (prevProps.keywords!=this.props.keywords){
      console.log(window.localStorage.getItem("keyword"))
    }

  render(){
    const{newInput} =this.props
    return(
      <div>
      </div>
    )
  }
}
export default Ebay

Answer 1

我不确定我是否在回答您要问的问题，因此很抱歉这不是您要问的问题。

步骤1。当您需要进行此更新时，请进行Ebay道具的更改。（我想您说您已经发生这种情况了？）

第2步：更改道具时，使Ebay的状态更新。在这里，您只需使用componentWillReceiveProps来查看道具更改，并相应地更新状态。

class Ebay extends React.Component {
  constructor() {
     super();
     this.state = { data: [] };
  }

  componentWillRecieveProps(nextProps) {
    if (nextProps.keyword !== this.props.keyword) {
       this.setState({ data: ['something new'] });
    }
  }

  render() { ... }
}

在React.js中通过状态更改更新子组件

1 个答案: