Как менять текст у нескольких кнопок сразу?

Question

[Trisman]

https://vk.cc/auaisi

При нажатии на записаться появляется кнопка отправить
Нужно, чтобы при нажатии на отправить у кнопки записаться текст сменялся на вы записаны

У меня почему-то меняется текст только у одной кнопки.

Comments

[Владимир]

Вынесите код в песочницу, например https://codesandbox.io/

[Владимир]

Вообще для связывания нескольких компонентов используют Context API или стейт менеджемент вроде редакс

[Trisman]

Владимир, А я не вынес? Просто ссылку сократил

[Владимир]

Trisman, у меня не работает эта сокращалка

[Trisman]

Владимир, https://codepen.io/loozmax/pen/ExVRaew?editors=0010

Answer 1

[hzzzzl]

handleClickSubmit = () => {
        // this.props.handleFormSubmitted(!this.state.isSubmited)  <- 
        // что-то такое послать в родительский компонент, и там это сохранить в стейт, 
        // в зависимости от этого и менять текст кнопки
        this.setState({
            isSubmited: !this.state.isSubmited,
        });
    }

Comments

[Trisman]

А можно пример на моем коде? А то не совсем получается :

[hzzzzl]

Trisman, сделал чуть иначе, и пересохранил на jsfiddle

см как я вынес всю логику из EventForm наверх, в итоге только родительский компонент всем стейтом заведует и перекидывает состояние формы в пропсах

[Trisman]

hzzzzl, Спасибо!

Answer 2

[Владимир]

Первый вариант - двунаправленный поток данных как в первом ответе, но если у вас будет 10 - 20 компонентов вы запутаетесь
Проще всего подключить любой стейт менеджемент
Context API https://reactjs.org/docs/context.html
redux + react redux
https://mobx.js.org/README.html
Из новых https://recoiljs.org/
Второе, согласно последнему style guide новые компоненты нужно делать функциональными с использованием хуков, а не классами
1) Они лучше вписываются в функциональный подход реакта, 2) Лучше работают с Fiber