Как передать данные от дочернего родительскому компоненту при нажатии на кнопку в React?

Question

[Space Around]

Существует родительский компонент forma внутри которого 2 дочерних компонента input и button.
Вопрос: Как реализовать получение значения state, который принадлежит компоненту input в sate, который принадлежит forma по нажатию на button?
Дополнение: Если очень коротко, нажимаем кнопку и значение state input'а присваивается значению state forma. Интересует именно такое условие.

forma

spoiler

import React from 'react'
import InputText from './InputText'
import Button from './Button'

class Forma extends React.Component {
    constructor (props) {
        super (props);
        this.state = {
            value: '',
        }
    }

    render () {
        return (
            <div>
                <InputText updateData = {this.updateData1} /><br/>
                <Button />
            </div>
        )
    }
}

export default Forma

input

spoiler

import React from 'react'

class InputText extends React.Component {
    constructor (props) {
        super (props);
        this.state = {
            value: ''
        }
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange (event) {
        this.setState({value: event.target.value});
    }

    render () {
        return (
            <input type="text" onChange={this.handleChange} value={this.state.value}/>
        )
    }
}

export default InputText

button

spoiler

import React from 'react'

class Button extends React.Component {
    constructor (props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e) {
      e.preventDefault();
    }

    render () {
        return (
            <button onClick={this.handleClick}>Отправить</button>
        )
    }
}

export default Button

Answer 1

[Марат Иванов]

В данном случае обработчики событий выставь в форме а не в инпуте, и спусти колбэки пропсами в button и input.

Comments

[Space Around]

Айрат Мухаметшин, что значит

и спусти колбэки пропсами в button и input.

?

[sinneren]

Максим Виксна, он говорит ровно про то, что я описал про это. только так из баттона не получить стейт инпута всё равно. только или как я написал, или если только value, то refs использовать

Answer 2

[sinneren]

Смотрите в документации lift state.
Если коротко, то пишите функцию в forma, которая будет принимать стейт как параметр и делать setState форме. Передаём в input компоент параметр со значением - та самая функция (метод). Когда срабатывает handleChange, то запустить метод из пропсов и передать ему стейт. И тогда не нужна будет кнопка. Или объединить их в еще один компонент обёртку, проделать ровно то же самое, но там сделать обработку нажатия кнопки которая передаст выше в форму, но не вижу смысла

Comments

[Space Around]

sinneren, https://medium.com/@jmuse/%D0%BF%D0%B5%D1%80%D0%B5... , то есть как тут от ребёнка к родителю?

[sinneren]

Максим Виксна, ага, не понимаю зачем левые статьи, когда всё то же самое в документации https://reactjs.org/docs/lifting-state-up.html#lif...

[sinneren]

Максим Виксна, но это актуально для того, где этот стейт находится. Потому или на onChange инпута, или использовать Refs https://reactjs.org/docs/glossary.html#refs и только если нужно значение inputa и больше ничего от стейта

[Space Around]

sinneren, если да, то на мой взгляд проблема состоит в отсутствии оптимизации. При любых изменениях происходит присвоение, что рентабельно для различных валидаций, но не для нажатия на кнопку. Нужно а-ля

$("#button").click(function(){
    var value = document.getElementById("input").value;
});

[sinneren]

Максим Виксна, это а-ля и есть Refs.