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

Question

[kiberlain]

Есть ссылка в одном компоненте с аттрибутом например data-title="на старт"
Как мне кликом достать значение этого атрибута и отобразить в произвольном месте сайта, в другом компоненте?

Comments

[Everybody_Lies]

https://ru.reactjs.org/docs/lifting-state-up.html

Answer 1

[shsv382]

Изучай state management. У тебя есть родительский компонент и два дочерних, в одном - кнопка, в другом - то, что надо изменить.

<Parent>
    <Child1><a data-title="на старт" /></Child1>
    <Child2></*что-то для изменения, например param*/></Child2>
</Parent>

в state родителя должен быть нужный параметр, изменяемый по нажатию кнопки, а также функция-обработчик нажатия кнопки. Функцию-обработчик передаешь как prop в Child1, а параметр из state - в Child2.

class Parent extends React.Component {
    state = {
        naStart: false
    }

    handleClick = (event) => {
        if (event.target.dataTitle === "на старт") {
            this.setState({naStart: true})
        }
    }

    render() {
        return (
            <div>
                <Child1 onClick={this.handleClick} />
                <Child2 param={this.state.naStart} />
            </div>
        )
    }
}

Либо изучай redux, там более гибкое управление состоянием