Javascript React组合框（npm组件）返回[object]

我现在为自己设置了一个任务，创建一个语言选择框，作为基础，并在学习和反应时使用它。到目前为止，当我在组合框中选择一个条目时，返回的代码是

[object object]

代码：

import React，{useState}来自“React”；
从“反应响应组合框”导入组合框；
导出默认函数ComboxLang（道具）{
const[selectedOption，setSelectedOption]=useState（“”）；
const[highlightedOption，setHighlightedOption]=useState（“”）；
const options=props.dataSet.map（（inputValue）=>{
//const columnWidth=props.columnsWidth.language_name+“px”；
const columnWidth=props.columnsWidth；
让keys=Object.keys（columnWidth）；
console.log（'键是'+键）
const renderedColumns=keys.map（columnName=>{
返回(
{inputValue[columnName]}
);
})
返回(
{renderedColumns}
)
})
返回(
反应组合框

所选选项-{“”}
{" "}
{selectedOption.length>0？selectedOption:“无”}


突出显示的选项-{“}
{" "}
{highlightedOption.length>0？highlightedOption:“无”}

(
{option}
)}
onSelect={（选项）=>setSelectedOption（选项）}
onChange={（事件）=>console.log（event.target.value）}
启用自动完成
onOptionsChange={（选项）=>setHighlightedOption（选项）}
/>
);
}

index.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import ComboBoxLang from './combobox_test.js';

const languages = [
    {
        "id": 1,
        "language_name": "Afrikaans",
        "language_native_name": "Afrikaanse taal",
        "language_full_name": "Afrikaanse taal (Afrikaans)",
        "language_code": "af",
        "translation_engine_id": 2,
        "translation_engine_name": "Google"
    },
    {
        "id": 2,
        "language_name": "Albanian",
        "language_native_name": "Gjuha shqipe",
        "language_full_name": "Gjuha shqipe (Albanian)",
        "language_code": "sq",
        "translation_engine_id": 2,
        "translation_engine_name": "Google"
    }
];


class App extends React.Component {
    render () {
        return (
            <div>
                <ComboBoxLang dataSet={languages} columnsWidth={{language_name:200,language_native_name:300}}/>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('drop-down-menu')
);

从“React”导入React；
从“react dom”导入react dom；
从“./combobox_test.js”导入ComboBoxLang；
常量语言=[
{
“id”：1，
“语言名称”：“南非荷兰语”，
“语言本地名称”：“Afrikaanse taal”，
“语言全称”：“南非荷兰语”，
“语言代码”：“af”，
“翻译引擎id”：2，
“翻译引擎名称”：“谷歌”
},
{
“id”：2，
“语言名称”：“阿尔巴尼亚语”，
“语言/母语/姓名”：“Gjuha shqipe”，
“语言全称”：“Gjuha shqipe（阿尔巴尼亚语）”，
“语言代码”：“sq”，
“翻译引擎id”：2，
“翻译引擎名称”：“谷歌”
}
];
类应用程序扩展了React.Component{
渲染（）{
返回(
);
}
}
ReactDOM.render(
,
document.getElementById（'下拉菜单'）
);

---

目标是有效地使语言和本机语言（或以后的语言代码）在选择后显示在组合框中。我留下了2个“显示”和“选择”框，这样，一旦它工作，我就可以了解它是如何工作的，并允许其他事物交互或引用这些项目。目前，我一直在试图弄清楚它为什么会吐出

[object object]

，以及它实际需要纠正的地方。

这意味着

event.target.value

是一个对象而不是一个原语-这可能不是您所期望的。您需要查阅

react responsive combo box

上的文档，以准确查看传递给

onChange

的内容，或者查阅源代码：@mario_sunny:谢谢，感谢链接。似乎它无法处理多个事物的接收，或者我最终用元素形成的块。看起来它回到了绘图板上，通过查看源代码，似乎它的设置不仅仅是一个简单的输入数组。

import React from 'react';
import ReactDOM from 'react-dom';
import ComboBoxLang from './combobox_test.js';

const languages = [
    {
        "id": 1,
        "language_name": "Afrikaans",
        "language_native_name": "Afrikaanse taal",
        "language_full_name": "Afrikaanse taal (Afrikaans)",
        "language_code": "af",
        "translation_engine_id": 2,
        "translation_engine_name": "Google"
    },
    {
        "id": 2,
        "language_name": "Albanian",
        "language_native_name": "Gjuha shqipe",
        "language_full_name": "Gjuha shqipe (Albanian)",
        "language_code": "sq",
        "translation_engine_id": 2,
        "translation_engine_name": "Google"
    }
];


class App extends React.Component {
    render () {
        return (
            <div>
                <ComboBoxLang dataSet={languages} columnsWidth={{language_name:200,language_native_name:300}}/>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('drop-down-menu')
);