具有动态键名的Reactjs setState（）不起作用

Question

此处代码为https://codesandbox.io/s/yqxr2z02pv

我正在使用此代码，因此我不需要setState onUpdate一一

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

但是当输入值更改时，组件不会显示该值。

任何简单的例子都可以使它正常工作吗？

Answer 1

您无需将状态复制到Parent和Child中，而是可以将状态保留在Parent组件中，并将它们作为props传递下来。您也可以将name道具放在inputs上，并直接使用onUpdate道具传递事件。

示例

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>

Answer 2

尝试首先制作一个对象，然后向其添加动态键

#include <stdio.h>
#include <stdlib.h>

// node that can hold char * (strings) and next
struct node {
    char* data;
    struct node * next;
};

/*
I'm trying to create a linked list (containing List 1 and List 2) of linked lists, i.e.

    List 1         List 2
    1A               2A
    1B               2B

Where only nodes 1A, 1B, 2A and 2B have unique data (List 1 data just pointers to 1A data, List1 next just points to 1A next etc.)
*/

int main()
{

    // Will contain pointers to the heads of the 2 linked lists
    struct node** list_1 = NULL;
    struct node** list_2 = NULL;

    // Nodes under list_1
    struct node* one_a = NULL;
    struct node* one_b = NULL;

    // Nodes under linked list b
    struct node* two_a = NULL;
    struct node* two_b = NULL;

    // allocate 6 nodes in the heap
    list_1 = (struct node**)malloc(sizeof(struct node*));
    list_2 = (struct node**)malloc(sizeof(struct node*));

    // list 1 will contain
    one_a = (struct node*)malloc(sizeof(struct node));
    one_b = (struct node*)malloc(sizeof(struct node));

    // list 2 will contain
    two_a = (struct node*)malloc(sizeof(struct node));
    two_b = (struct node*)malloc(sizeof(struct node));
    // create linked list holding heads of 2 linked lists (i.e. first_list and second_list)

    // populate list1
    one_a->data = "a";
    one_a->next = one_b;
    one_b->data = "apple";
    one_b->next = NULL;

    // populate list2
    two_a>data = "be";
    two_a->next = two_b;
    two_b->data = "bite";
    two_b->next = NULL;

    // populate list of lists
    list_1->data = one_a->data;
    list_1->next = list_2;
    list_2->data = two_a->data;
    list_2->next = NULL;

}

Answer 3

我编辑您的代码。你可以试试。 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;