reactjs - 在组件之间交换数据

Question

嗨，我有一个名为 user 的组件，它的 render 方法有一个表单句柄。提交表单后，我将用户的消息类型传递给数组。因此，每次用户通过提交按钮时，该数组都应附加输入框中键入的消息。

但我需要将此数组的内容发送到另一个组件并在那里显示。（handleSubmit(event) 返回的数组内容）。我还是一无所知。有人可以指导我。这可能吗？

Home.js 是父 js 文件。它调用 User.js 和 Chat.js

主页.js

import React, { Component } from 'react';
import { User } from './User';
import { Chat } from './Chat';
export class Home extends Component {
  displayName = Home.name
  render() {
      return (            
          <div >
              <div class="user-container">
                  <User />
              </div>
              <div class="chat-container">
                  <Chat />
              </div> 
        </div>
    );
  }
}
<span class="border"></span>

用户.js

import * as React from 'react';

export class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '',
      messages: []
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  render() {
    return (
      <div class="panel panel-default" id="frame1" onSubmit={this.handleSubmit}>
        <form class="form-horizontal" action="/action_page.php">
          <div class="form-group">
            <label class="control-label col-sm-2" for="message">
              Message
            </label>
            <div class="col-sm-10">
              <input
                type="text"
                class="form-control"
                name="message"
                placeholder="Enter your Message"
                onChange={this.handleChange}
              />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" id="submit" class="btn btn-default">
                Submit
              </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
  handleChange(evt) {
    this.setState({ [evt.target.name]: evt.target.value });
  }
  handleSubmit(event) {
    var newArray = this.state.messages.slice();
    this.setState({ messages: this.state.message }, () => {
      newArray.push(this.state.messages);
      this.setState({ messages: newArray }, () => {
        alert(this.state.messages);
      });
    });
    event.preventDefault();
  }
}

聊天.js

import * as React from 'react'
export class Chat extends React.Component {
    render() {
        return (
           <div></div>);
    }
}

我需要做的是向 Chat.js 显示 User.js 的消息状态

甚至更好的方法也受到高度赞赏

标签： reactjs

Answer 1

为了在兄弟组件之间共享数据，您应该提升您的状态或使用其他一些解决方案，例如 Redux。我在这里提供一个例子。如您所见，我们将messages状态移动到父组件。使用处理函数，我们message从子组件中获取并更新父组件中的状态。

class App extends React.Component {
  state = {
    messages: [],
  };

  handleSubmit = message =>
    this.setState( currentState => ( {
      messages: [ ...currentState.messages, message ],
    } ) );

  render() {
    return (
      <div>
        <div>
          <User onSubmit={this.handleSubmit} />
        </div>
        <div>
          <Chat messages={this.state.messages} />
        </div>
      </div>
    );
  }
}

const Chat = props => (
  <div>
    <ul>{props.messages.map( message => <li key={message}>{message}</li> )}</ul>
  </div>
);

class User extends React.Component {
  state = {
    message: "",
  };

  handleChange = evt => this.setState( { [ evt.target.name ]: evt.target.value } );

  handleSubmit = ( e ) => {
    e.preventDefault();
    this.props.onSubmit( this.state.message );
    this.setState( { message: "" } );
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.message}
            name="message"
            placeholder="Enter your Message"
            onChange={this.handleChange}
          />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

评论后更新

我将组件编写Chat为功能组件，因为它不使用任何状态和生命周期方法。React.Component您可以通过简单地从方法扩展并使用方法将其编写为类函数render。

class Chat extends React.Component {
  render() {
    return (
      <div>
        <ul>
          {this.props.messages.map( message => <li key={message}>{message}</li> )}
        </ul>
      </div>
    );
  }
}