处理子组件点击父组件答案

【问题标题】：handle child component click in parent component处理子组件点击父组件
【发布时间】：2020-07-11 13:40:41
【问题描述】：

我正在尝试在 React 中进行多选。我现在所做的是强制用户在数组中传递给我的多选组件的对象中具有以下属性。

interface IMandatoryPropertyOnUserData {
  id: string | number
  optionText: string | number
  optionValue: any
  checked?: Boolean | undefined
}

optionText 是下拉列表中的文本，optionValue 是它后面的值。 Antd 有一个 Select 和一个 Option 组件，它作为 children 传递给 Select 组件。

这就是我的多选组件当前的使用方式。

 <MultiSelect
    dropdownData={[{ id: 1, optionText: 'usa', optionValue: 1, time: 'a' }]}
    onSelect={(selectedValues) => {
      console.log(selectedValues)
    }}
  />

在我的组件中创建选项：

     const dropdownEl = dropdownData.map((data) => {
        return (
         <div className={optionWrapper} onClick={() => handleOptionSelected(data)}>
           {data.optionText}
         </div>
    )
  })

我试图避免让用户通过强制 props 并像 Antd 的 select 那样做。

这是 Antd 的 select 示例：https://codesandbox.io/s/hqkmv Option 组件上没有 onClick 回调属性。

当 Option 组件像 Antd 一样被点击时，我不知道如何调用和告诉 Select 组件。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以让用户仅将选项值传递给“MultiSelect”，然后在 MultiSelect 组件内创建选项组件，并在内部使用“onClick”管理选择。

【讨论】：

我认为这就是我已经完成的，但我不知道下拉列表中的文本应该是什么。所以我让用户通过{ id: 1, optionText: 'usa', optionValue: 1}
我不确定您所说的“下拉列表中的文本”是什么意思。如果用户给你一个字符串选项数组，例如 ["dog", "cat", "whale", "bird"]，那么下拉菜单将包含这些选项，并且在 MultiSelect 内部，您可以为每个都有 key 和 onclick，不需要用户传递它。