反应和语义 - 用户反应

我是React中的新成员，我使用语义 - 用户反应。我试图从Semantic-ui-react中使用Dropdown，但是我无法通过道具。当我在示例代码中的任何地方console.log我的道具时出现错误。反应和语义 - 用户反应

Semantic-ui-react下拉示例看起来不同于我的正常反应代码。它只有一个出口。我的普通代码有一个渲染和一个返回部分。

http://react.semantic-ui.com/modules/dropdown

我父页面获取子是这样的：

<div className="ui grid"> 
    <TagFilter handleTagChange={this.handleTagChange} tagsFilterValue={this.state.tagsFilterValue} /> 
</div>

我TagFilter组件看起来是这样的：

import React from 'react' 
import { Dropdown } from 'semantic-ui-react' 

import { friendOptions } from '../common' 

const DropdownExampleSelection =() => (
    <Dropdown placeholder='Select Friend' fluid selection options={friendOptions} /> 
) 

export default DropdownExampleSelection

不知道如果我能在这个例子中重写代码看起来更像我的其他代码。

来源

2016-12-20 ComCool

你能告诉我们你的代码吗？ – damd

它作为一个模块导出，在你的App.js中你可以导入它并将它用作组件。与他们在您的示例中导入下拉菜单相同。 – Tapirboy

您尚未定义任何名为'TagFilter'的组件，至少不在任何提供的代码中。目前还不清楚你想要做什么。我建议你在没有这个库的情况下使用反应，直到你了解基础。 – Tapirboy

目前尚不清楚你试图达到的目标。我会假设有一个TagFilterComponent，并且您想要在其中渲染Dropdown组件。

我建议你自己创建一个组件，我们称之为TagDropdown。你通过这个道具你想要的，你添加你需要的功能。然后为其render功能 - 您可以根据需要使用DropDown组件。通过您提供的代码

也就是you extend the DropDown by composition。

喜欢的东西：

/'''/ 
class TagDropdown extends React.Component { 
    constructor(props) { 
     super(props) 
    } 
    /* 
    Add your functions and handlers, if any.. 
    */ 
    render() { 
    return (
     <Dropdown /* <add your props and options> */ /> 
    ) 
    } 
}

现在你TagFilterComponent可以呈现<TagDropdown>和你通过你选择的道具。

来源

2016-12-20 14:08:37 Tapirboy

谢谢Tapirboy，当我打电话给我的功能我的事件（五）是一个代理对象。但是，如果我添加像我这样的功能测试： 'handleTagChange（test，e）{console.log（“handleTagChange”）; console.log（e）; }' 然后e正确返回下拉目标值。为什么是这样？ – ComCool

不用担心，随时接受答案，如果它确实帮助你。关于这个'handleTagChange'，你可能最好创建一个新的问题并提供足够的代码来理解上下文。 – Tapirboy

@Tapirboy我知道这是一种奇怪的方式来联系你，但你曾经运行过TravAlert吗？如果是这样，我一直试图通过您的Blogspot网站与您联系。当你有机会时，你能联系我吗？ – invictvs1

反应和语义 - 用户反应

回答

相关问题