Javascript 如何在React中从头开始创建受控输入

本质上，我想让父元素控制其子元素的值。通过前面使用React输入，我知道您需要传递onChange属性，以便父级可以更新它传递给其子级的值

我已经将value和onChange道具设置为可选的，因为我还希望支持将子对象用作不受控制的输入的情况

子系统的非受控和未处理受控变体均起作用。但是，已处理的受控变量没有

你有什么办法让它工作吗？我在下面将我的JSFIDLE与显示我的问题的最小示例联系起来：

代码：

const Parent=（）=>{
常量[parentValue，setParentValue]=React.useState（0）；
返回(
应表现为不受控输入（即值应改变）[工程]
应该像受控输入一样工作（即值应该更改，因为传入了onChange处理程序）[不工作]
应该像受控输入一样工作，除非没有onChange处理程序意味着值不应该更改[WORKS]
);
};
常量子项=（{value，onChange}）=>{
常量[childValue，setChildValue]=React.useState（值！==未定义？值：0）；
const handleOnChange=（newValue）=>{
如果（值===未定义）{
setChildValue（newValue）；
}
if（onChange！==未定义）{
onChange（newValue）；
}
};
返回(
);
};
常量孙子=（{value，onChange}）=>{
const handleOnClick=（）=>{
onChange（值+1）；
};
返回(
{value}
);
};
ReactDOM.render（，document.querySelector（“#app”））

之所以发生这种情况，是因为传递给

子组件的
值
道具仅用作
使用状态
挂钩的初始值。在下一次更新时，
useState
将忽略此值，因为
childValue
已初始化。要更新状态变量
childValue
，您需要使用
useffect
，您必须在其中调用
setChildValue
：

const Child = ({value, onChange}) => {
  const [childValue, setChildValue] = React.useState(value !== undefined ? value : 0);

  React.useEffect(() => {
    value !== undefined && setChildValue(value);
  }, [value]);

...
}

王牌-谢谢！未意识到useState会在初始化值已初始化一次后忽略初始化值
const Child = ({value, onChange}) => {
  const [childValue, setChildValue] = React.useState(value !== undefined ? value : 0);

  React.useEffect(() => {
    value !== undefined && setChildValue(value);
  }, [value]);

...
}