1

Есть две компоненты, я хочу изменить фрагмент из h1 по клику. Не знаю, насколько правильно делаю, наверное нужно через setState. Не уверен, что правильно понял как его использовать.

import React from 'react';
import '../index.css'
import Cover from './Cover'

class Main extends React.Component {
    constructor(props) {
        super(props)
        state = {
            isClicked: false
        }
        this.changeName = changeName.bind(this);
    }

    render() {
        return (
            <div className="main">
                <input className="input" placeholder="Username" />
                <button onClick={this.changeName} className="submit-button">Submit</button>
            </div>
        )
    }

    changeName = () => {
        this.setState({
            isClicked: true
        })
        Cover.username = document.getElementById('input').nodeValue
    }
}

export default Main

 //----------------------------------------------------------------

import React from 'react';
import '../index.css'

class Cover extends React.Component {
    constructor(props) {
        super(props)
        this.username = 'username';
    }

    render() {
        return (
            <div className="cover">
                <img className="logo" src="./assets/logo.svg" />
                <h1 className="header">Welcome on board, {{username}}!</h1>
            </div>
        )
    }
}

export default Cover

1 ответ 1

1

Можно сделать все просто. Начнем с дочернего компонента, а именно с userName, если вы хотите его менять внутри родителя, то я бы положил его в стейт родителя, а в дочерний компонент передавал как props. Тогда код станет немного более понятен.

Тогда в дочернем компоненте нам не нужен конструктор. Что будет в дочернем компоненте тогда (рекомендую при именовании использовать camelCase):

import React from 'react';
import '../index.css'

class Cover extends React.Component {    
    render() {
        return (
            <div className="cover">
                <img className="logo" src="./assets/logo.svg" />
                <h1 className="header">Welcome on board, {this.props.userName}!</h1>
            </div>
        )
    }
}

export default Cover;

Тогда как в родителе будет следующий код:

import React from 'react';
import '../index.css'
import Cover from './Cover'

class Main extends React.Component {
    constructor(props) {
        super(props)
        state = { 
            isClicked: false,
            userName: 'default name' 
        };
        this.changeName = changeName.bind(this);
    }

    render() {
        return (
            <div className="main">
                <Cover userName={this.state.userName} />
                <input className="input" placeholder="Username" />
                <button onClick={this.changeName} className="submit-button">Submit</button>
            </div>
        )
    }

    changeName = () => {
        this.setState({
            isClicked: true,
            userName: document.getElementById('input').nodeValue
        })
    }
}

export default Main;

Обратите внимание на следующие правки, которые я внес.

  1. Класс Cover перестал иметь конструтор
  2. Класс Cover внутри render метода имеет отрисовку имени из props
  3. Класс Main внутри changeName метода записывает userName в свой стэйт
  4. Класс Main внутри render метода имееет <Cover userName={this.state.userName} /> отрисовку дочернего контрола с передачей пропсы.
  5. Класс Main внутри конструктора добавлен стейт по-умолчанию userName: 'default name' для первого значнеия, чтобы при вызовер render метода не упала ошибка по отсутсвию this.state.userName

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.