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

Question

[Benchstyle]

Только начал изучать реакт, наткнулся на информацию, что все компоненты должны хранится в отдельных папках. Допустим есть input, button. Пытаюсь по клику на кнопку получить value от input, получаю Cannot read property 'value' of undefined - думаю, что неправильно получаю свойство от Message. Что я делаю неверно? :

class Message 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" value={this.state.value} onChange={this.handleChange}/>
        );
    };
} 

export default Message;

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

    handleClick() {
        console.log(Message.state.value);
    }

    render() {
        return (
            <button onClick={this.handleClick}>Your message</button>
        );
    }
}

export default MessageButton;

Answer 1

[ned4ded]

Вам нужен либо стор (Mobx, Redux), либо родительский компонент, внутри которого будет происходит взаимодействие двух дочерних

console.log(Message.state.value);

Здесь вы обращаетесь к статическому свойству класса Message, конечно это не будет работать

Comments

[Benchstyle]

допустим, мы создадим родительский компонент Template и внутри него разместим Message и MessageButton, как тогда будет выглядеть передача свойства?

[ned4ded]

Benchstyle, создаете в Message пропс onChange, в который передается колбек. Этот колбек вешается на внутренний элемент input в компоненте Message. Каждый раз на изменение инпута будет вызываться колбек, передаваемый сверху родителем (компонентом Template). Внутри темплейта обрабатывается это событие, вытаскивается значение и сохраняется в стейт.

Создаете в MessageBtn пропс onClick, в который передается колбек. Этот колбек вешается на кнопку внутри MessageBtn. Срабатывать будет по нажатию, а обрабатываться будет в родителе.

В целом, в данном случае логика "что все компоненты должны хранится в отдельных папках" работает иначе. Компонент !== дом элементу, сл-но вы вполне можете изолировать верстку кнопки и инпута в одном компоненте и не создавать такую сложную структуру без особой на то причины.