如何在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

爲了簡化溶液你可以做這樣的事情：

handleInputChange(event) { 

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

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

：

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

在BigText組件，那麼你可以通過這個回調像這樣把一些數據

而這個數據從國家轉移到你的BigTextMobile組件：

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