我试图将数据从子组件发送到其父组件,如下所示:

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

下面是子组件:

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

我需要的是在父组件中按用户获取所选的值.我得到了这个错误:

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

有人能帮我找到问题吗?

另外,子组件正在从一个json文件创建一个下拉列表,我需要一个下拉列表来显示json数组的两个元素彼此相邻(例如:"aaa,english"作为首选!)

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

推荐答案

这应该行得通.在发回props 时,您将其作为对象发送,而不是作为值发送,或者将其作为父组件中的对象使用.其次,需要格式化json对象以包含名称-值对,并使用DropdownListvalueFieldtextField属性

Short Answer

父母亲:

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

小孩:

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

Detailed:

EDIT:

考虑做出react .createClass已从v16中弃用.从0开始,最好继续并通过扩展React.Component来创建React组件.使用此语法将数据从子组件传递到父组件

父母亲

class 父母亲Component 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>            
        );
    }
}

Using createClass syntax which the OP used in his answer 父母亲

const 父母亲Component = 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" 
    }, 
  ] 
}

Reactjs相关问答推荐

如何将图像(在代码中称为自己)定位在蓝色圈内的点上?我正在使用material UI和Reaction

TypeError:SearchProduct.get()获得了意外的关键字参数查询'

使用`Link`包装`tr`标记会在Next.js中产生水合错误14

如何使用Reaction Testing Library+Vitest正确更新单元测试中的输入?

有没有可能在next.js和ssr中使用tsps?

使用Next.js和Next-intl重写区域设置

悬停轴时重新绘制自定义参照线

如何获取用户在 GooglePlacesAutocomplete 中输入的文本?

tRPC/react-query,在所有查询完成之前,组件不会收到任何 useQuery 的结果

如何根据用户在react.js中的 Select , Select 多个心形图标?

Primereact 的日历组件在每个月 12 日之后使用非唯一键生成

在 React 中,为什么在使用 addEventListener 时外部元素上的 onclick 事件监听器在内部元素的 onclick 事件监听器之前执行?

React Native - 身份验证 - 触发值以更改 Auth 和 UnAuth 堆栈导航器

如何禁用来自 React Native API 的某些特定项目的可touch 不透明度

在嵌套的 Stack Navigator 中的 BottomTabBar 中导航会导致比以前更多的渲染

如果查询不存在,如何返回所有产品?

单击三个按钮之一后如何显示特定按钮的内容?单击其中一个按钮后应隐藏所有按钮

下拉菜单在 AppBar 中未正确对齐

错误(未捕获的类型错误):无法读取未定义的属性(读取参数)

添加禁用的默认选项以 Select