ReactまたはReact-Reduxの1つのコンポーネントから別のコンポーネントへデータを渡すには？

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;

これは私がラジオボタンをクリックすると上に表示される3つのファイルをインポートしていた私が作った画面です。 も同様脇示す関連する携帯電話の画面があり 今私はあなたはそれが は、今私はソリューションにあなたを簡素化するために

Answer 1

BigTextMobileコンポーネントでその入力値を印刷したいフォームを含むされ、BigTextを見ることができるように輸入例えばこのような何か行うことができます。

handleInputChange(event) { 

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

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

： BigTextコンポーネントで

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

を、あなたは、このように、このコールバックを経由して、いくつかのデータを置くことができます

そして状態からあなたBigTextMobileコンポーネントにこのデータを転送：

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