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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 1480 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

组件

input

函数

React

9 条回复 • 2020-11-23 16:01:42 +08:00

leoyzh97

2020-11-22 21:35:26 +08:00 via Android

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

leoyzh97

2020-11-22 21:35:36 +08:00 via Android

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

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

2020-11-23 10:48:39 +08:00

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

susunus

2020-11-23 12:43:31 +08:00 via iPhone

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

ljpCN

2020-11-23 13:11:01 +08:00 via Android

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

park4ce666

2020-11-23 14:32:01 +08:00 via iPhone

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

KuroNekoFan

2020-11-23 14:41:36 +08:00

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

justsosososo

2020-11-23 16:01:42 +08:00

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