Могу ли я изменить родительское состояние компонента в ReactJs?

Question

Скажем, у меня следующий компонент:

class LeftPanel extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {abc: 'xyz'}; 
    } 
render() { 
    return (
    <div> 
    <Thumb src={img1}/> 
    <Thumb src={img2}/> 
    </div>); 
} 

Внутри компонента, есть внутренний компонент под названием Thumb, который идет как есть:

class Thumb extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { src: props.src }; 
    } 

    render() { 
    return (
    <div> 
     <img src={this.state.src}></img> 
    </div> 
    ); 
    } 

}

Вопрос: Могу ли я изменить состояние компонента LeftPanel внутри Thumb? Если да, то как?

Answer 1

создайте метод на левой панели для обработки события. Затем передайте метод дочернему компоненту.

Теперь, если вы хотите передать данные родителям, я бы порекомендовал библиотеку, такую ​​как flux или redux. поскольку у редукса есть глобальное состояние, оно доступно для всех компонентов. Когда вы изменяете глобальное состояние на целое приложение, оно переписывается с новым состоянием. Новое состояние видно всем компонентам.

class LeftPanel extends React.Component { 
    constructor(props) { 
    super(props); 
    this.modifyLeftpanel = this.modifyLeftpanel.bind(this); 
    this.state = {abc: 'xyz'}; 
    } 

    modifyLeftpanel(newvar){ 
     //Do something with newvar 
    } 
render() { 
    return (
    <div> 
    <Thumb src={img1} modifyLeftPanel={this.modifyLeftpanel} /> 
    <Thumb src={img2} modifyLeftPanel={this.modifyLeftpanel} /> 
    </div>); 
} 

здесь большой палец

class Thumb extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { src: props.src }; 
    this.doSomething = this.doSomething.bind(this); 
    } 

    doSomething(){ 
     this.props.modifyLeftpanel(10); 
    } 

    render() { 
    return (
    <div> 
     <img src={this.state.src}></img> 
     <button onClick={this.doSomething}>Modify Parent</button> 
    </div> 
    ); 
    }