V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
park4ce666
V2EX  ›  React

/*初学者*/react 函数组件如何把自己的 useState 向上传,或者是外部如果获取某个组件的 state

  •  
  •   park4ce666 · 2020-11-22 21:04:32 +08:00 via iPhone · 2057 次点击
    这是一个创建于 1447 天前的主题,其中的信息可能已经有所发展或是发生改变。
    react 新手,学的是函数式组件和 hooks 的方式;
    想做的是简单的 <input/> 子组件会有好几个,在某个阶段会把用户输入的几个 <input />里的值都收集起来,因为<input />是函数组件创造的 ,里面的值是 useState 保存的,我要怎么获取到每个子组件的值,还是我应该用什么 hook 可以让子组件<input/>自己的值和父级组件绑定的?希望各位指条路
    9 条回复    2020-11-23 16:01:42 +08:00
    leoyzh97
        1
    leoyzh97  
       2020-11-22 21:35:26 +08:00 via Android
    说不就是受控组件嘛,可以看看 antd form 表单的实现。应该就是父组件生成一个 fieldstore 原来存储子组件的表单字段,生成一个注册方法给子组件注册,然后监听 onchange 事件。
    leoyzh97
        2
    leoyzh97  
       2020-11-22 21:35:36 +08:00 via Android
    这不就是受控组件嘛,可以看看 antd form 表单的实现。应该就是父组件生成一个 fieldstore 原来存储子组件的表单字段,生成一个注册方法给子组件注册,然后监听 onchange 事件。
    azcvcza
        3
    azcvcza  
       2020-11-23 09:41:03 +08:00
    也没到那么搞中间层 form 的地步,你就在
    `
    const Parent = (props)=>{
    const [pState,setPState] = useState({});

    function handlePStateChange(InputName, value){
    setPState({
    ...pState,
    [InputName]:value,
    })
    }

    return (
    <div>
    <Child id={'1'} handleChange={handlePStateChange} />
    ....
    <Child id={'n'} handleChange={handlePStateChange} />
    </div>
    )
    }
    const Child = (props) =>{
    const [input, setInput] = useState();


    return (
    <Input onChange={(e)=>props.handleChange(props.id, e.target.value)} />
    )

    }
    `
    awefeng
        4
    awefeng  
       2020-11-23 10:48:39 +08:00
    父组件给个监听给子组件就好了 固定一下范式
    susunus
        5
    susunus  
       2020-11-23 12:43:31 +08:00 via iPhone
    usecallback 这个从父组件传给自组件
    ljpCN
        6
    ljpCN  
       2020-11-23 13:11:01 +08:00 via Android
    最简单的方式是子组件不要保存状态,状态提升到父组件
    park4ce666
        7
    park4ce666  
    OP
       2020-11-23 14:32:01 +08:00 via iPhone
    收到并阅读了大家的想法和意见后,我打算试一下给父级组件创建一个 use Context 的钩子,然后子组件通过 Context 和父级共享状态,这么写,每一次应用组件的时候可能要根据子组件的数量和对应的字段属性在父级手动先预设好,感觉还是有些死板,目前我的脑子只够写到这一步了,不知道还能否优化到自动适配子组件。
    KuroNekoFan
        8
    KuroNekoFan  
       2020-11-23 14:41:36 +08:00
    需要导出状态变化的组件可以提供一个 props, onCompStateChange,调用方 /父组件通过传入一个函数就可以拿到其状态变化了
    子组件不保存状态不是一个好做法,该有本地状态就应该有本地状态
    justsosososo
        9
    justsosososo  
       2020-11-23 16:01:42 +08:00
    hook 只是用来简写的新特性 该 props 还是得 props 不要被这些概念混淆了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1099 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 18:58 · PVG 02:58 · LAX 10:58 · JFK 13:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.