跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • /*初学者*/react 函数组件如何把自己的 useState 向上传,或者是外部如果获取某个组件的 state
未分類
24 11 月 2020

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

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

資深大佬 : park4ce666 2

react 新手,学的是函数式组件和 hooks 的方式;
想做的是简单的 <input/> 子组件会有好几个,在某个阶段会把用户输入的几个 <input />里的值都收集起来,因为<input />是函数组件创造的 ,里面的值是 useState 保存的,我要怎么获取到每个子组件的值,还是我应该用什么 hook 可以让子组件<input/>自己的值和父级组件绑定的?希望各位指条路
大佬有話說 (9)

  • 資深大佬 : leoyzh97

    说不就是受控组件嘛,可以看看 antd form 表单的实现。应该就是父组件生成一个 fieldstore 原来存储子组件的表单字段,生成一个注册方法给子组件注册,然后监听 onchange 事件。

  • 資深大佬 : leoyzh97

    这不就是受控组件嘛,可以看看 antd form 表单的实现。应该就是父组件生成一个 fieldstore 原来存储子组件的表单字段,生成一个注册方法给子组件注册,然后监听 onchange 事件。

  • 資深大佬 : azcvcza

    也没到那么搞中间层 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

    父组件给个监听给子组件就好了 固定一下范式

  • 資深大佬 : susunus

    usecallback 这个从父组件传给自组件

  • 資深大佬 : ljpCN

    最简单的方式是子组件不要保存状态,状态提升到父组件

  • 主 資深大佬 : park4ce666

    收到并阅读了大家的想法和意见后,我打算试一下给父级组件创建一个 use Context 的钩子,然后子组件通过 Context 和父级共享状态,这么写,每一次应用组件的时候可能要根据子组件的数量和对应的字段属性在父级手动先预设好,感觉还是有些死板,目前我的脑子只够写到这一步了,不知道还能否优化到自动适配子组件。

  • 資深大佬 : KuroNekoFan

    需要导出状态变化的组件可以提供一个 props, onCompStateChange,调用方 /父组件通过传入一个函数就可以拿到其状态变化了
    子组件不保存状态不是一个好做法,该有本地状态就应该有本地状态

  • 資深大佬 : justsosososo

    hook 只是用来简写的新特性 该 props 还是得 props 不要被这些概念混淆了

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具