代码之家 › 专栏 › 技术社区 › user3789200

在组件之间交换数据

reactjs

user3789200 · 技术社区 · 6 年前

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

但是我需要将这个数组的内容发送到另一个组件并在那里显示(handleSubmit(event)返回的数组内容。但我还是毫无头绪。有人能给我指路吗。这有可能吗?

主页.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();
  }
}

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

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

即使是一个更好的方法做这是高度赞赏

1 回复 | 直到 6 年前

devserkan 6 年前

为了在同级组件之间共享数据,您应该 lift your state up 或者使用其他解决方案,比如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>
    );
  }
}