Как в react реализовать простой пример: заполняем input — его value отображается в тексте?

Question

[Николай Лапшин]

Тапками не бросайте - решил первый раз поковырять react.
По сути hello world.

Есть input, есть текст на странице. Вводим в input что-то - value отображается в тексте.
У меня, собственно, непонимание вызывает, как это реализовать, если input в одном компоненте, а текст - в другом?
Или это уже костыли и велосипеды и так делать нельзя?

Answer 1

[Захар Орлов]

Без redux:

const Input = (props) => (
  <input type="text" onChange={props.handleChange} />
)

const Output = (props) => (
  <div>{props.text}</div>
)

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {}
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (e) {
    this.setState({
      value: e.target.value
    })
  }

  render () {
    return (
      <div>
        <Input handleChange={this.handleChange} />
        <Output text={this.state.value} />
      </div>
    )
  }
}

Comments

[Николай Лапшин]

Спасибо за ответ. А если рендерить в одном компоненте, а - в другом, то можно как-то сделать, чтобы текст реагировал на изменение input'а?

[Никита Гущин]

Николай Лапшин: тут у вас и так рендер в разных компонентах (Input, Output). А в App хранится состояние инпута

Answer 2

[Александр Таратин]

https://habrahabr.ru/post/279249/

Comments

[Николай Лапшин]

Да изучил уже. Все равно не понимаю, как изменение значения input в одном компоненте повлияет на изменение текста в другом компоненте

[Олег Гамега]

Николай Лапшин: если смотреть на пример что вам дали выше то value это state не input, а App, на input навешен слушатель ввода, каждый раз когда вы что то вводите вы в слушателе изменяете state, запустите этот пример и посмотрите что происходит в react dev tool