Блог

Вот код https://codesandbox.io/s/yqxr2z02pv

Я использую этот код, поэтому мне не нужно устанавливать setState один за другим при обновлении

   onUpdate = (event) => {
    const { target: { name, value } } = event
    console.log(value);
    this.setState({ [name]: value })
  }
  

Но компонент не отображает значение при изменении входного значения.

Какой-нибудь простой пример может заставить это работать?

Вместо дублирования состояния в Parent и the Child вы можете сохранить состояние только в Parent компоненте и передать их в качестве реквизитов. Вы также могли бы поместить name prop на свой inputs и использовать onUpdate prop напрямую для передачи события.

Пример

 class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "firstName",
      lastName: "lastName"
    };
  }

  onUpdate = event => {
    const {
      target: { name, value }
    } = event;
    this.setState({ [name]: value });
  };

  render() {
    const { firstName, lastName } = this.state;

    return (
      <div>
        <h2>Parent</h2>
        Value in Parent Component State firstName: {firstName}
        <br />
        Value in Parent Component State lastName: {lastName}
        <br />
        <Child
          onUpdate={this.onUpdate}
          firstName={firstName}
          lastName={lastName}
        />
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    const { firstName, lastName, onUpdate } = this.props;

    return (
      <div>
        <h4>Child</h4>
        first Name
        <input
          type="text"
          placeholder="type here"
          name="firstName"
          onChange={onUpdate}
          value={firstName}
        />
        <br />
        last Name
        <input
          type="text"
          name="lastName"
          placeholder="type here"
          onChange={onUpdate}
          value={lastName}
        />
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>  

Попробуйте сначала создать объект и добавить к нему динамический ключ вот так

 onUpdate = (event) => {
    const { target: { name, value } } = event
    console.log(value);

    const newData = {};
    newData[name] = value;
    this.setState(newData);
}
  

Я редактирую ваш код. вы можете попробовать. https://codesandbox.io/s/m37wlryy78?fontsize=14

Child.js

 import React from "react";

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      lastName: ""
    };
  }

  update = e => {
    this.props.onUpdate(e);
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
    return (
      <div>
        <h4>Child</h4>
        first Name
        <input
          type="text"
          placeholder="type here"
          onChange={this.update}
          value={this.state.firstName}
          name={"firstName"}
        />
        <br />
        last Name
        <input
          type="text"
          placeholder="type here"
          onChange={this.update}
          value={this.state.lastName}
          name={"lastName"}
        />
      </div>
    );
  }
}

export default Child;