如何在React或React-Redux中将数据从一个组件传递到另一个组件？

Question

import React, { Component } from 'react';





class BigText extends Component {



  constructor(props) {

        super(props);



        this.state = {

            title: '',

            text: '',

            summary: ''

        };



        this.handleInputChange = this.handleInputChange.bind(this);

    }



    handleInputChange(event) {



        this.setState({

            [event.target.name]: event.target.value

        });



    }



  render() {



    return (

      <div>

        <div>

          <div className="row animated fadeIn">



                <div className="px-1" style={{ width:100 + '%' }}><br />



                    <div className="mb-1">

                      <input type="text"

                       className="form-control"

                       placeholder="Title"

                       name="title"

                       value={this.state.title}

                       onChange={this.handleInputChange}

                       />

                    </div>



                    <div className="mb-1">

                      <textarea

                      className="form-control"

                      placeholder="Text"

                      name="text"

                      value={this.state.text}

                      onChange={this.handleInputChange}

                      />

                    </div>



                    <div className="mb-1">

                      <textarea

                       className="form-control"

                       placeholder="Summary"

                       name="summary"

                       value={this.state.summary}

                       onChange={this.handleInputChange}

                       />

                    </div>

                </div>

                <div>

              </div>

          </div>

    </div>

    </div>

    )



  }

}



export default BigText;


import React, { Component } from 'react';

import BigText from './bigText.js';

import InboxStyle from './inboxStyle.js';

import ImageStyle from './imageStyle.js';

import BigTextMobile from './bigText.mobile.js';

import InboxStyleMobile from './inboxStyle.mobile.js';

import ImageStyleMobile from './imageStyle.mobile.js';



class BasicNotification extends Component {



  constructor(props) {

    super(props);

    this.state = {value: ''};



    this.handleClick = this.handleClick.bind(this);

  }



  static contextTypes = {

    router: React.PropTypes.object

  }



  handleClick() {

    this.context.router.push('/notifications');

  }



  handleChange(event) {

    this.setState({value: event.target.value});

  }



    checkRadio =(e) =>{

  if(e.target.checked) {

    this.setState({layout: e.target.value});

  }

}



  render() {



    return (

      <div>

        <div>

          <h1 className="px-2">Create Notification</h1>

          <hr />

          <div className="row px-1 py-2 animated fadeIn">



                <div className="px-1 mr-2" style={{ width:50 + '%' }}><br />



                    <div className="mb-1">

                      <input type="text"

                       className="form-control"

                       placeholder="Title"

                       name="title"

                       />

                    </div>



                    <div className="mb-1">

                      <textarea

                      className="form-control"

                      placeholder="Text"

                      name="text"

                      />

                    </div>



                      <div>

                          <select placeholder="Logo" className="form-control" onChange={this.handleChange}>

                            <option default>Select Logo</option>

                            <option>Default</option>

                            <option>Custom</option>

                          </select>

                      </div>

                    <div><br />



                      <div className="btn-group" data-toggle="buttons">



                      <label className="btn btn-css btn-outline-secondary">

                        <input type="radio" name="layout" value="image" onChange={this.checkRadio}/>ImageStyle

                      </label>



                      <label className="btn btn-css btn-outline-secondary">

                        <input type="radio" name="layout" value="big" onChange={this.checkRadio}/>BigText

                      </label>



                      <label className="btn btn-css btn-outline-secondary">

                        <input type="radio" name="layout" value="inbox" onChange={this.checkRadio}/>InboxStyle

                      </label>

                    </div>



                      {

                          (this.state.layout === "big")?



                        <BigText/>:



                        (this.state.layout === "image")?



                        <ImageStyle/>:



                        (this.state.layout === "inbox")?



                        <InboxStyle/>:



                        null

                        }



                      <br />



                    <div className="row px-1" >

                      <div>

                        <button className="nav-link btn btn-block btn-info" onClick={this.handleClick} >Save</button>

                      </div>

                      <div className="px-1">

                        <button className="nav-link btn btn-block btn-danger"> Cancel</button>

                      </div>

                    </div>



                    </div><br />



                </div>

                <div>

                      {

                        (this.state.layout === "big")?



                        <BigTextMobile text={this.state.text} summary={this.state.summary} title={this.state.title}/>:

                        (this.state.layout === "image")?



                        <ImageStyleMobile/>:



                        (this.state.layout === "inbox")?



                        <InboxStyleMobile/>:



                        null

                      }

                </div>

          </div>

    </div>

    </div>

    )



  }

}



export default BasicNotification;

这是我制作的屏幕，我在该屏幕上导入了三个文件，这些文件将在单击单选按钮时显示。另外还有一个相关的移动屏幕，例如，我现在导入了，如您看到的BigText，它包含表格，现在我想在BigTextMobile组件中打印其输入值

Answer 1

为了简化解决方案，您可以执行以下操作：

<BigText onChange={data => {this.setState({ data })}} />

然后，在 BigText 组件中，您可以通过此回调添加一些数据，如下所示：

handleInputChange(event) {

    const data = {
        [event.target.name]: event.target.value
    };

    this.setState(data );
    this.props.onChange(data);
}

并将数据从状态传输到您的 BigTextMobile 组件：

<BigTextMobile data={this.state.data} ... />