コンポーネントの構造を反復して状態を上に戻す

Question

各コンポーネントには入力が含まれていますが、メインコンポーネントにはその情報をすべて一度にサーバーに送信するボタンがあります。問題は、ボタンを持つメインコンポーネントに子コンポーネントの入力内容がないことです。

私は以前、コンテンツを州に戻す方法を打ちましたが、それをやるのが簡単ではありませんでしたか？それはちょうどそれを行う奇妙な方法のように感じる。

ここに私が持っているものと私の意味の短い例があります。

メインコンポーネント：

import React from 'react'; 
 
import { Button } from 'react-toolbox/lib/button'; 
 

 
import Message from './Message'; 
 

 

 
class Main extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { test: '' }; 
 
    } 
 
    render() { 
 
    return (
 
     <div className="container mainFrame"> 
 
     <h2>Program</h2> 
 
     <Message /> 
 

 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default Main;

とメッセージコンポーネント：

import React from 'react'; 
 
import axios from 'axios'; 
 
import Input from 'react-toolbox/lib/input'; 
 

 
class Message extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { message: '' }; 
 
    this.handleChange = this.handleChange.bind(this); 
 
    } 
 

 
    handleChange(value) { 
 
    this.setState({ message: value }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <Input 
 
     type="text" 
 
     label="Message" 
 
     name="name" 
 
     onChange={this.handleChange} 
 
     /> 
 
    ); 
 
    } 
 
} 
 

 
export default Message;

Answer 1

はい、あなたの質問に答えるために。あなたは、refを使ってみることができます。 refをコンポーネントに追加すると、子コンポーネントのメソッド、状態、およびすべてにアクセスできます。しかし、それは従来の方法ではない、人々は一般的に、前述のようにcallbacksを使用します。

import React from 'react'; 
 
import { Button } from 'react-toolbox/lib/button'; 
 

 
import Message from './Message'; 
 

 

 
class Main extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { test: '' }; 
 
    } 
 
    
 
    clickHandler() { 
 
    let childState = this.refs.comp1.state //returns the child's state. not prefered. 
 
    let childValue = this.refs.comp1.getValue(); // calling a method that returns the child's value 
 
    } 
 

 
    render() { 
 
    return (
 
     <div className="container mainFrame"> 
 
     <h2>Program</h2> 
 
     <Message ref="comp1"/> 
 
     <Button onClick={this.clickHandler} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default Main;

import React from 'react'; 
 
import axios from 'axios'; 
 
import Input from 'react-toolbox/lib/input'; 
 

 
class Message extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { message: '' }; 
 
    this.handleChange = this.handleChange.bind(this); 
 
    } 
 

 
    handleChange(value) { 
 
    this.setState({ message: value }); 
 
    } 
 
    
 
    getValue() { 
 
    return this.state.message; 
 
    } 
 

 
    render() { 
 
    return (
 
     <Input 
 
     type="text" 
 
     label="Message" 
 
     name="name" 
 
     onChange={this.handleChange} 
 
     /> 
 
    ); 
 
    } 
 
} 
 

 
export default Message;

Answer 2

あなたはin docs提案されて何をしているので、それは良い方法です。

私は、私はそれはあなたが使用することができますformかもしれないと仮定し、サーバーにすべてを一度に

を、その情報を送信するボタンがあります。その場合は、onSubmitイベントを処理して、すべてのネストされた入力フィールド名を値とともに持つFormDataオブジェクトを作成できます（子コンポーネントであっても）。コールバックの必要はありません。 [Reduxの（http://redux.js.org/）が存在する理由だ

handleSubmit(e){ 
    e.preventDefault(); 
    const form = e.currentTarget; 
    const formData = new FormData(form); // send it as a body of your request 

    // form data object will contain key value pairs corresponding to input `name`s and their values.  
} 

checkout Retrieving a FormData object from an HTML form