Wie übergebe ich Daten von der untergeordneten Komponente an die übergeordnete Komponente in ReactJS?
P粉441076405
P粉441076405 2023-08-27 13:34:07
0
2
424
<p>Ich versuche, Daten von einer untergeordneten Komponente wie folgt an ihre übergeordnete Komponente zu senden: </p> <pre class="brush:php;toolbar:false;">const ParentComponent = React.createClass({ getInitialState() { zurückkehren { Sprache: '', }; }, handleLanguageCode: function(langValue) { this.setState({Sprache: langValue}); }, render() { zurückkehren ( <div className="col-sm-9" > <SelectLanguage onSelectLanguage={this.handleLanguage}/> </div> ); });</pre> <p>Dies ist die Unterkomponente: </p> <pre class="brush:php;toolbar:false;">export const SelectLanguage = React.createClass({ getInitialState: function(){ zurückkehren{ ausgewählter Code: '', Ausgewählte Sprache: '', }; }, handleLangChange: Funktion (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!../sprachen.json"); var jsonArray = json.sprachen; zurückkehren ( <div> <DropdownList ref='dropdown' data={jsonArray} value={this.state.selectedLanguage} caseSensitive={false} minLength={3} filter='enthält' onChange={this.handleLangChange} /> </div> ); } });</pre> <p>Was ich brauche, ist, den vom Benutzer ausgewählten Wert in der übergeordneten Komponente abzurufen. Ich erhalte diese Fehlermeldung: </p> <pre class="brush:php;toolbar:false;">Uncaught TypeError: this.props.onSelectLanguage ist keine Funktion</pre> <p>Kann mir jemand helfen, das Problem herauszufinden? </p> <p>P.S. Die Unterkomponente erstellt ein Dropdown aus einer JSON-Datei. Ich benötige das Dropdown, um zwei Elemente eines JSON-Arrays nebeneinander anzuzeigen (z. B. „aaa,english“ wie bevorzugt!)</p> <pre class="brush:php;toolbar:false;">{ "Sprachen":[ [ „aaa“, "Englisch" ], [ „aab“, "Schwedisch" ], }</pre> <p><br /></p>
P粉441076405
P粉441076405

Antworte allen(2)
P粉652495194

将数据从子组件传递到父组件

在父组件中:

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

在子组件中:

demoMethod(){
   this.props.sendData(value);
 }
P粉946437474

这应该有效。在发送回 prop 时,您将其作为对象发送,而不是将其作为值发送,或者将其用作父组件中的对象。其次,您需要格式化 json 对象以包含名称值对,并使用 DropdownList

valueFieldtextField 属性

简答

父级:

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

孩子:

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

详细:

编辑:

考虑到 React.createClass 从 v16.0 开始已被弃用,最好通过扩展 React.Component 来创建 React 组件。使用此语法将数据从子组件传递到父组件将如下所示

父级

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>
        )
     }
}

孩子

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>            
        );
    }
}

使用OP在其答案中使用的createClass语法 父级

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>
        );
});

孩子

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" 
    }, 
  ] 
}
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!