Как поменять значение пропса в дочернем компоненте?

Question

В компонент Choose-Modal из компонента Editor приходит пропс this.currentPage. Как мне поменять значение этого пропса из Choose-Modal для Editor? По умолчанию значение пропсов в Реакте read-only. А мне нужно именно из Choose-Modal менять это значение в Editor.

Editor:

import React, {
    Component
} from 'react';
import ChooseModal from '../choose-modal';

export default class Editor extends Component {


    constructor() {
        super();
        this.currentPage = "multipurpose.html";     
    }

    render() { 
        return ( 
            <ChooseModal
            currentPage={this.currentPage}
             />
        )
    }
}

Choose-Modal:

import React, {Component} from 'react';

class ChooseModal extends Component {
    constructor(props){
        super(props);
    }

    render(){
        this.props.currentPage="index.html";  //в консоли пишет, что this.props.currentPage read-only
        console.log(this.props.currentPage)
        return(
            <div>1</div>
        )
    }
}

export default ChooseModal;

Answer 1

В родительском компоненте объявляем функцию, которая будет делать апдейт currentPage и пробрасываем ее в дочерний компонент:

import React, { Component } from 'react';

import ChooseModal from '../choose-modal';

export default class Editor extends Component {

constructor() {
    super();
    this.state = {
     currentPage: "multipurpose.html"     
  }
}

updateCurrentPage = (value ) => {
    this.setState({ currentPage : value });
}

render() { 
    return ( 
        <ChooseModal currentPage={this.state.currentPage}               
                     updateCurrentPage= {this.updateCurrentPage} />
    )
  }
}

В дочернем просто вызываем:

import React, {Component} from 'react';

class ChooseModal extends Component {
  constructor(props) {
    super(props);
}

componentDidMount () {
   this.props.updateCurrentPage("index.html");
}

render(){
    console.log(this.props.currentPage);

    return(
        <div>1</div>
    )
  }
}

export default ChooseModal;

БЛОГ НА HUSL

Как поменять значение пропса в дочернем компоненте?

Ответы (1 шт):