React js 상위 구성 요소에서 하위 구성 요소 상태 변경

React js 상위 구성 요소에서 하위 구성 요소 상태 변경

두 가지 구성 요소가 있습니다. 하위 구성 요소의 상태를 변경할 부모 구성 요소:

class ParentComponent extends Component {
  toggleChildMenu() {
    ?????????
  }
  render() {
    return (
      <div>
        <button onClick={toggleChildMenu.bind(this)}>
          Toggle Menu from Parent
        </button>
        <ChildComponent />
      </div>
    );
  }
}

및 하위 구성 요소:

class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false;
    }
  }

  toggleMenu() {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      <Drawer open={this.state.open}/>
    );
  }
}

부모 컴포넌트의 버튼을 클릭하면 자녀 컴포넌트의 오픈 상태를 부모 컴포넌트에서 변경하거나 부모 컴포넌트에서 자녀 컴포넌트의 toggle Menu()를 호출해야 합니다.

상태는 부모 컴포넌트에서 관리해야 합니다.전송 할 수 있습니다.open속성을 추가하여 하위 구성요소에 값을 추가합니다.

class ParentComponent extends Component {
   constructor(props) {
      super(props);
      this.state = {
        open: false
      };

      this.toggleChildMenu = this.toggleChildMenu.bind(this);
   }

   toggleChildMenu() {
      this.setState(state => ({
        open: !state.open
      }));
   }

   render() {
      return (
         <div>
           <button onClick={this.toggleChildMenu}>
              Toggle Menu from Parent
           </button>
           <ChildComponent open={this.state.open} />
         </div>
       );
    }
}

class ChildComponent extends Component {
    render() {
      return (
         <Drawer open={this.props.open}/>
      );
    }
}

부모 컴포넌트는 자녀에게 프로펠을 전달하는 자녀 상태를 관리할 수 있으며 자녀는 componentWillReceiveProps를 사용하여 이 프로펠을 상태로 변환할 수 있습니다.

class ParentComponent extends Component {
  state = { drawerOpen: false }
  toggleChildMenu = () => {
    this.setState({ drawerOpen: !this.state.drawerOpen })
  }
  render() {
    return (
      <div>
        <button onClick={this.toggleChildMenu}>Toggle Menu from Parent</button>
        <ChildComponent drawerOpen={this.state.drawerOpen} />
      </div>
    )
  }
}

class ChildComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false
    }
  }

  componentWillReceiveProps(props) {
    this.setState({ open: props.drawerOpen })
  }

  toggleMenu() {
    this.setState({
      open: !this.state.open
    })
  }

  render() {
    return <Drawer open={this.state.open} />
  }
}

를 사용할 수 있습니다.createRef상위 구성 요소에서 하위 구성 요소의 상태를 변경합니다.여기 모든 단계가 있습니다.

1. 하위 구성 요소의 상태를 변경하는 방법을 만듭니다.
2. 다음을 사용하여 상위 구성 요소의 하위 구성 요소에 대한 참조를 생성합니다.React.createRef().
3. 다음을 사용하여 하위 구성 요소와 참조 첨부ref={}.
4. 다음을 사용하여 하위 구성 요소 메서드를 호출합니다.this.yor-reference.current.method.

상위 컴포넌트

class ParentComponent extends Component {
constructor()
{
this.changeChild=React.createRef()
}
  render() {
    return (
      <div>
        <button onClick={this.changeChild.current.toggleMenu()}>
          Toggle Menu from Parent
        </button>
        <ChildComponent ref={this.changeChild} />
      </div>
    );
  }
}

자 컴포넌트

class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false;
    }
  }

  toggleMenu=() => {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      <Drawer open={this.state.open}/>
    );
  }
}

위의 답변은 부분적으로 맞지만, 제 시나리오에서는 값을 사용하여 모달 표시/조작을 했기 때문에 값을 상태로 설정하려고 합니다.그래서 저는 아래와 같이 사용했습니다.누군가에게 도움이 되길 바랍니다.

class Child extends React.Component {
  state = {
    visible:false
  };

  handleCancel = (e) => {
      e.preventDefault();
      this.setState({ visible: false });
  };

  componentDidMount() {
    this.props.onRef(this)
  }

  componentWillUnmount() {
    this.props.onRef(undefined)
  }

  method() {
    this.setState({ visible: true });
  }

  render() {
    return (<Modal title="My title?" visible={this.state.visible} onCancel={this.handleCancel}>
      {"Content"}
    </Modal>)
  }
}

class Parent extends React.Component {
  onClick = () => {
    this.child.method() // do stuff
  }
  render() {
    return (
      <div>
        <Child onRef={ref => (this.child = ref)} />
        <button onClick={this.onClick}>Child.method()</button>
      </div>
    );
  }
}

레퍼런스 - https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542

기능 컴포넌트를 사용하고 있는 경우.이것은, 다음의 방법으로 실현할 수 있습니다.

const ParentComponent = () => {
   const [isOpen, setIsOpen] = useState(false)

   toggleChildMenu() {
      setIsOpen(prevValue => !prevValue)
   }

   return (
     <div>
       <button onClick={toggleChildMenu}>
         Toggle Menu from Parent
       </button>
       <Child open={isOpen} />
     </div>
   );
}



const Child = ({open}) => {
  return (
    <Drawer open={open}/>
  );
}

부모로부터 프로펠을 전송하여 자녀 컴포넌트에서 사용할 수 있으므로 전송된 프로펠 변경에 따라 자녀 상태 변경을 기반으로 하고 자녀 컴포넌트에서 getDerivedStateFromProps를 사용하여 이 문제를 처리할 수 있습니다.

어제 제가 시도한 다른 방법이 있습니다.

자녀 스크립트에서 부모 및 일반 구성 요소가 사용할 수 있는 방법을 정의합니다.

    var ChildStateModificationFunc;
    const Child = ()=>{
    const [someState, setSomeState] = useState();

    //define the state that you want to modify
    ChildStateModificationFunc = (modVal)=>{
        setSomeState(modVal)
    }

    return (
    <div>
        {/* your child jsx here */}
    </div>
    }

    //export both the child and the method
    export default Child;
    export {ChildStateModificationFunc}

상위 스크립트에서 두 항목을 모두 가져옵니다.

    import Child, {ChildStatteModificationFunc} from 'Child.js'

    const Parent = ()=>{

    var newVal = 'some parent val'  //let say you just fetch this from some web api
    //share the newVal with Child component
    ChildStatteModificationFunc(newVal)

    return(
    <div>
        <Child />
    </div>)

언급URL : https://stackoverflow.com/questions/39041710/react-js-change-child-components-state-from-parent-component