React組件結構和向上傳遞狀態

我有幾個組件，每個組件都包含輸入，並且在主要組件上，我有一個按鈕將一次全部發送到服務器。問題是具有按鈕的主要組件沒有子組件的輸入內容。React組件結構和向上傳遞狀態

在過去，我已經傳遞了一種方法，將內容備份到狀態，但是有沒有一種更簡單的方法呢？這只是一種奇怪的做法。

下面是我擁有的和我的意思的簡短例子。

主要成份：

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;

來源

2017-09-02 Milos

這就是爲什麼[終極版]（http://redux.js.org/）存在。 –

@EdgarHenriquez，如果適用於大型複雜應用，仍然可以使用。對於較小的，回調就足夠了。 –

@EdgarHenriquez我會說redux更痛苦，因爲這裏只需要收集輸入字段的值。 –

要回答你的問題，是的。你可以嘗試使用參考。將ref添加到Message組件，您將能夠訪問子組件的方法，狀態和所有內容。但那不是傳統的方式，人們通常使用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;

來源

2017-09-02 17:27:27

你在做什麼，建議in docs所以這是一個很好的方式。

我有一個按鈕，將一次全部發送信息到服務器

我想，這會是form就可以使用。如果是這樣，你可以處理onSubmit事件並創建包含所有嵌套輸入字段名稱及其值的FormData對象（即使在子組件中）。那麼不需要回調。

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

來源

2017-09-02 17:28:47 Tomasz

React組件結構和向上傳遞狀態

回答

相關問題