为什么不使用react和javascript将值传递给Select组件?

堆栈用户

我有一个在创建和编辑模式下使用的子组件。它具有选择菜单,该菜单不显示任何值,直到用户在创建模式下从选择菜单中选择一个选项为止。

在编辑模式下,此选择菜单应显示先前选择的选项。

下面是我的代码,

const Child = (mode: mode, formikBag: formikBag) => {
    const handleValue = (field) => {
        if (mode === 'edit') {
            const selectedId = formikBag.values[itemId];
            const selectedItems = allItems.filter((item) => item.id === 
            itemId;
            return selectedItem[0].name;
        }
        return allItems.filter((option) => option.value === field.value); 
        //should be returned in create mode
    return(
        <Select
            value={handleValue}
        />
    );
}

上面的代码在编辑或创建模式下不显示任何值。不知道出了什么问题。我是新来的反应。

有人可以帮我吗 谢谢。

tsecheukfung01

handleValue 是一个函数,您需要执行它才能获得传回的收益

<Select value={() => handleValue(yourFieldHere)} />

如果Select是您编写的组件,则可以在内部调用该函数Select

//In Select.js

//{value} means deconstruct that specific props passed from the parent, which name is 'value'. In this case, you have passed the handleValue through value. Therefore, you can use that function in the Select component
const Select = ({value}) => {
    const selectValue = value(yourFieldName)

    console.log(selectValue)
    return (
       <div>
         //some content
       </div>
    )
}

export default Select

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用react-select将值传递给状态

来自分类Dev

为什么getServerSideProps没有将正确的值传递给组件prop?

来自分类Dev

如何在不使用angular的情况下将输入值从父组件传递给子组件?

来自分类Dev

为什么Task对象不使用传递给它的参数?

来自分类Dev

用于将具有相同键和值的 React props 传递给组件的语法糖

来自分类Dev

如何在不使用 JSON 的情况下将 php 数组值传递给 javascript

来自分类Dev

将值传递给呼叫者而不使用`return`

来自分类Dev

将表单输入的值传递给React中的同级组件

来自分类Dev

如何将变量中的值传递给React组件

来自分类Dev

如何在React中不使用props的情况下将函数传递给组件的层次结构?

来自分类Dev

使用 React Router 时如何将方法和状态传递给嵌套组件?

来自分类Dev

为什么Javascript不通过id将值传递给文本框MVC?

来自分类Dev

如何在组件中使用useHook而不是使用react和typescript将它返回的值作为prop传递给组件?

来自分类Dev

如何使用NextJS的动态导入将值传递给组件

来自分类Dev

为什么使用临时寄存器将值传递给段寄存器?

来自分类Dev

使用 React 将索引作为状态传递给组件

来自分类Dev

如何在不使用argv和argc的情况下将总和值传递给C ++程序

来自分类Dev

将<select> HTML标记中的选定值传递给JAVASCRIPT

来自分类Dev

如何在不使用JSF中的隐藏标签的情况下将javascript内部的值传递给托管bean属性?

来自分类Dev

如何在不使用JSF中的隐藏标签的情况下将javascript内部的值传递给托管bean属性?

来自分类Dev

使用 Redux 和 React Native 将值传递给动作创建者

来自分类Dev

angular:将输入值传递给组件

来自分类Dev

为什么使用Messenger而不是将引用传递给Handler?

来自分类Dev

在React中,使用TypeScript,如何使用RefForwardingComponent和forwardRef将ref传递给自定义组件?

来自分类Dev

使用Javascript将按钮值传递给textarea值

来自分类Dev

React:将功能传递给子组件

来自分类Dev

将React Route传递给子组件

来自分类Dev

将函数传递给React中的组件

来自分类Dev

React js将props传递给组件

Related 相关文章

  1. 1

    使用react-select将值传递给状态

  2. 2

    为什么getServerSideProps没有将正确的值传递给组件prop?

  3. 3

    如何在不使用angular的情况下将输入值从父组件传递给子组件?

  4. 4

    为什么Task对象不使用传递给它的参数?

  5. 5

    用于将具有相同键和值的 React props 传递给组件的语法糖

  6. 6

    如何在不使用 JSON 的情况下将 php 数组值传递给 javascript

  7. 7

    将值传递给呼叫者而不使用`return`

  8. 8

    将表单输入的值传递给React中的同级组件

  9. 9

    如何将变量中的值传递给React组件

  10. 10

    如何在React中不使用props的情况下将函数传递给组件的层次结构?

  11. 11

    使用 React Router 时如何将方法和状态传递给嵌套组件?

  12. 12

    为什么Javascript不通过id将值传递给文本框MVC?

  13. 13

    如何在组件中使用useHook而不是使用react和typescript将它返回的值作为prop传递给组件?

  14. 14

    如何使用NextJS的动态导入将值传递给组件

  15. 15

    为什么使用临时寄存器将值传递给段寄存器?

  16. 16

    使用 React 将索引作为状态传递给组件

  17. 17

    如何在不使用argv和argc的情况下将总和值传递给C ++程序

  18. 18

    将<select> HTML标记中的选定值传递给JAVASCRIPT

  19. 19

    如何在不使用JSF中的隐藏标签的情况下将javascript内部的值传递给托管bean属性?

  20. 20

    如何在不使用JSF中的隐藏标签的情况下将javascript内部的值传递给托管bean属性?

  21. 21

    使用 Redux 和 React Native 将值传递给动作创建者

  22. 22

    angular:将输入值传递给组件

  23. 23

    为什么使用Messenger而不是将引用传递给Handler?

  24. 24

    在React中,使用TypeScript,如何使用RefForwardingComponent和forwardRef将ref传递给自定义组件?

  25. 25

    使用Javascript将按钮值传递给textarea值

  26. 26

    React:将功能传递给子组件

  27. 27

    将React Route传递给子组件

  28. 28

    将函数传递给React中的组件

  29. 29

    React js将props传递给组件

热门标签

归档