viksnamax
@viksnamax
All-in-One

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

Существует родительский компонент 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
  • Вопрос задан
  • 85 просмотров
Решения вопроса 2
В данном случае обработчики событий выставь в форме а не в инпуте, и спусти колбэки пропсами в button и input.
Ответ написан
sinneren
@sinneren
Смотрите в документации lift state.
Если коротко, то пишите функцию в forma, которая будет принимать стейт как параметр и делать setState форме. Передаём в input компоент параметр со значением - та самая функция (метод). Когда срабатывает handleChange, то запустить метод из пропсов и передать ему стейт. И тогда не нужна будет кнопка. Или объединить их в еще один компонент обёртку, проделать ровно то же самое, но там сделать обработку нажатия кнопки которая передаст выше в форму, но не вижу смысла
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы