0

Есть родительский компонент, где при вводе меняется this.state.value. Это значение мне нужно передать в дочерний компонент <Child my={this.state.value} />, чтобы потом при каждом изменении я мог получить его через props.value. Однако, в моем случае не получается. Я вижу {this.state.value}, но в дочерний компонент оно попадает один раз.

Подскажите, пожалуйста, почему не работает такой код:

import React from "react";
import ReactDOM from "react-dom";

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    console.log(props);
  }

  render() {
    return <div>Child {this.props.my.value}</div>;
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Name:
            <input
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
            />
          </label>

          <input type="submit" value="Submit" />
        </form>

        <Child my={this.state.value} />
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
    ReactDOM.render(<Parent />, rootElement);

Заранее спасибо!

1 ответ 1

3

Измените с

<div>Child {this.props.my.value}</div>

На

<div>Child {this.props.my}</div>

вы передаете значение, а не объект

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.