Отлов изменения дочернего компонента?

Question

[mashincode]

У меня есть родителький компонент

class Parent extends React.Component {

    constructor(props) {
        super(props)
        this.testInputValue = ''
    }

    log_test_input_value = () => {
        console.log(this.testInputValue);
    }

    render() {
        return (
             <div>
              <button onClick={log_test_input_value}>Test log</button>
              <Child/>
            </div>
        )
    }
}

и дочерний компонент

class Child extends React.Component {

    constructor() {
        super();
        this.testInputValue = "" ; //пусть инпут изначально пустой
    }

    handleChange(event) {
        this.testInput = event.target.value
    }

    render() {
          <input onChange={this.handleChange(e)} placeholder="test" /> 
        }
    }
}

Они находяться в разных файлах и дочерний импортируется к родительскому.
Я хочу на изменении testInputValue в дочернем компоненте, обновлять его в родительском
Как правильно это делается?

Answer 1

[8XL]

Храните состояние в родительском компоненте и передавайте методы в пропсах дочернему.

class Parent extends React.Component {

    constructor(props) {
        super(props)
        this.testInputValue = ''
    }

    handleChange(event) {
        this.testInputValue = event.target.value
    }

    log_test_input_value = () => {
        console.log(this.testInputValue);
    }

    render() {
        return (
             <div>
              <button onClick={log_test_input_value}>Test log</button>
              <Child onChange={ this.handleChange }/>
            </div>
        )
    }
}

Comments

[Владимир]

this.testInputValue = event.target.value
А этот код что делает в реакте?

[8XL]

Владимир, полагаю, что императивно меняет некую переменную, которая почему-то играет роль состояния?

Раз у человека это написано в коде, значит что-то делает и не создаёт ему проблем.

Answer 2

[Владимир]

Вы не читали документацию реакта по ходу.
https://reactjs.org/tutorial/tutorial.html#making-...

Comments

[mashincode]

Дело в том, что у меня большая вложенность, в дочернем еще один дочерний и т.д. и т.п. и изменения приходят из самого последнего, такой вариант, очееень громоздкий, что вы мне кинули

[Владимир]

mashincode, Не дочитали ?
https://uk.reactjs.org/docs/context.html

[8XL]

Попробуйте контекст(как у же предложили) и обратите внимание, что реакт пропагандирует композицию, вместо наследования.
https://ru.reactjs.org/docs/composition-vs-inherit...

[Владимир]

8XL, Да просто доку нужно прочитать всю