reactjs - 状态更改后更新 React 子组件

Question

我制作了一个文本输入框，当提交时，它将更新父组件中消息的状态。父组件中的消息被传递到消息显示。我希望负责显示消息的组件在每次提交后更新和显示消息，但不知道该怎么做。我在这里做了一个代码沙箱：

https://codesandbox.io/s/unruffled-pasteur-nz32o

这是我的代码：

父组件：

import React, { Component } from "react";
import Messages from "./Messages";
import Input from "./Input";

export default class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: []
    };
  }

  updateMessage(message) {
    this.state.messages.push(message);
  }

  render() {
    return (
      <div>
        <Messages messages={this.state.messages} />
        <Input updateMessage={message => this.updateMessage(message)} />
      </div>
    );
  }
}

消息输入组件：

import React, { Component } from "react";

export default class Input extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ""
    };
 }

  sendMessage() {
    this.props.updateMessage(this.state.message);
    this.setState({ message: "" });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.message}
          onChange={({ target }) => {
            this.setState({ message: target.value });
          }}
        />
        <button onClick={() => this.sendMessage()}>Send</button>
      </div>
    );
  }
}

消息显示组件：

import React, { Component } from "react";

export default class Messages extends Component {
  render() {
    return this.props.messages.map(message => {
      return <div>{message}</div>;
    });
  }
}

谢谢！

标签： reactjs

Answer 1

在您的updateMessage(message)方法中，您可以尝试：

updateMessage(message) {
    let { messages } = this.state;
    messages.push(message)
    this.setState({ messages })
}