Jak przekazać dane z komponentu podrzędnego do jego rodzica w ReactJS?

Question

Jak przekazać dane z komponentu podrzędnego do jego rodzica w ReactJS?

Próbuję wysłać dane z komponentu podrzędnego do jego rodzica w następujący sposób:

const ParentComponent = React.createClass({
    getInitialState() {
        return {
            language: '',
        };
    },
    handleLanguageCode: function(langValue) {
        this.setState({language: langValue});
    },

    render() {
         return (
                <div className="col-sm-9" >
                    <SelectLanguage onSelectLanguage={this.handleLanguage}/> 
                </div>
        );
});

A oto element potomny:

export const SelectLanguage = React.createClass({
    getInitialState: function(){
        return{
            selectedCode: '',
            selectedLanguage: '',
        };
    },

    handleLangChange: function (e) {
        var lang = this.state.selectedLanguage;
        var code = this.state.selectedCode;
        this.props.onSelectLanguage({selectedLanguage: lang});   
        this.props.onSelectLanguage({selectedCode: code});           
    },

    render() {
        var json = require("json!../languages.json");
        var jsonArray = json.languages;
        return (
            <div >
                <DropdownList ref='dropdown'
                    data={jsonArray} 
                    value={this.state.selectedLanguage}
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
});

To, czego potrzebuję, to pobranie wybranej wartości przez użytkownika w komponencie nadrzędnym. Dostaję ten błąd:

Uncaught TypeError: this.props.onSelectLanguage is not a function

Czy ktoś może mi pomóc znaleźć problem?

P. S. komponent potomny tworzy listę rozwijaną z pliku json i potrzebuję listy rozwijanej, aby pokazać oba elementy tablicy json obok siebie (jak: "aaa, english" jako pierwszy wybór!)

{  
   "languages":[  
      [  
         "aaa",
         "english"
      ],
      [  
         "aab",
         "swedish"
      ],
}

65

reactjs

Author: Birish, 2016-07-15

Source

3 answers

Aby przekazać dane z komponentu podrzędnego do komponentu nadrzędnego

W Składniku Nadrzędnym:

getData(val){
    // do not forget to bind getData in constructor
    console.log(val);
}
render(){
 return(<Child sendData={this.getData}/>);
}

W Składniku Potomnym:

demoMethod(){
   this.props.sendData(value);
 }

56

Author: Manisha Tan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-09 23:05:46

Znalazłem podejście, jak uzyskać dane z komponentu child u rodziców, gdy tego potrzebuję.

class ParentComponent extends Component{
  onSubmit(data) {
    let mapPoint = this.getMapPoint();
  }

  render(){
    return (
      <form onSubmit={this.onSubmit.bind(this)}>
        <ChildComponent getCurrentPoint={getMapPoint => {this.getMapPoint = getMapPoint}} />
        <input type="submit" value="Submit" />
      </form>
    )
  }
}

class ChildComponent extends Component{
  constructor(props){
    super(props);

    if (props.getCurrentPoint){
      props.getCurrentPoint(this.getMapPoint.bind(this));
    }
  }

  getMapPoint(){
    return this.Point;
  }
}

Ten przykład pokazuje, jak przekazać funkcję z komponentu potomnego do rodzica i użyć tej funkcji do pobrania danych od dziecka.

4

Author: MrDuDuDu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-19 09:00:56

score 90 · Accepted Answer

To powinno zadziałać. Podczas wysyłania właściwości z powrotem wysyłasz ją jako obiekt, a raczej wysyłasz ją jako wartość lub alternatywnie używasz jej jako obiektu w komponencie nadrzędnym. Po drugie musisz sformatować swój obiekt json tak, aby zawierał pary wartości name i użyć valueField i textField atrybutu DropdownList

Krótka Odpowiedź

Rodzic:

<div className="col-sm-9" >
     <SelectLanguage onSelectLanguage={this.handleLanguage}/> 
</div>

Dziecko:

handleLangChange = () => {
    var lang = this.dropdown.value;
    this.props.onSelectLanguage(lang);            
}

Szczegółowe:

EDIT:

Rozważając React.createClass jest przestarzały od wersji 16.0, lepiej jest utworzyć komponent Reactowy rozszerzając React.Component. Przekazywanie danych z komponentu podrzędnego do komponentu nadrzędnego za pomocą tej składni będzie wyglądać tak:

Rodzic

class ParentComponent extends React.Component{
    state: { language: '' }

    handleLanguage = (langValue) => {
        this.setState({language: langValue});
    }

    render() {
         return (
                <div className="col-sm-9" >
                    <SelectLanguage onSelectLanguage={this.handleLanguage}/> 
                </div>
        )
     }
}

Dziecko

var json = require("json!../languages.json");
var jsonArray = json.languages;

export class SelectLanguage extends React.Component {
    state = {
            selectedCode: '',
            selectedLanguage: jsonArray[0],
        }

    handleLangChange = () => {
        var lang = this.dropdown.value;
        this.props.onSelectLanguage(lang);            
    }

    render() {
        return (
            <div >
                <DropdownList ref={(ref) => this.dropdown = ref}
                    data={jsonArray} 
                    valueField='lang' textField='lang'
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
}

Używając createClass składni, której OP użył w swoim odpowiedź rodzic

const ParentComponent = React.createClass({
    getInitialState() {
        return {
            language: '',
        };
    },
    handleLanguage: function(langValue) {
        this.setState({language: langValue});
    },

    render() {
         return (
                <div className="col-sm-9" >
                    <SelectLanguage onSelectLanguage={this.handleLanguage}/> 
                </div>
        );
});

Dziecko

var json = require("json!../languages.json");
var jsonArray = json.languages;

export const SelectLanguage = React.createClass({
    getInitialState: function(){
        return{
            selectedCode: '',
            selectedLanguage: jsonArray[0],
        };
    },

    handleLangChange: function () {
        var lang = this.refs.dropdown.value;
        this.props.onSelectLanguage(lang);            
    },

    render() {

        return (
            <div >
                <DropdownList ref='dropdown'
                    data={jsonArray} 
                    valueField='lang' textField='lang'
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
});

JSON:

{ 
"languages":[ 

    { 
    "code": "aaa", 
    "lang": "english" 
    }, 
    { 
    "code": "aab", 
    "lang": "Swedish" 
    }, 
  ] 
}