javascript - 无法访问从父级触发的回调处理程序内的子级状态。（反应）

Question

这是一个活生生的例子。计数器保持静态，不会增加。 https://codepen.io/tudou/pen/jQeYaM

我ParentModal用作模型布局，它具有标题、页脚（公共共享组件）和ChildModalForUserForm.

但是，当用户单击提交按钮时ParentModal，会触发ChildModalForUserForm.

在submitHandler中，我无法访问状态变量。我该如何解决这个问题？

const ParentModal = (props) => {
    const {name, primaryButtonHandler} = props;
    return  ReactDOM.createPortal(
        <>
            ~~~
            <button type="submit" onClick={primaryButtonHandler}>
        </>, document.body
    ) ;
}

export default ParentModal;

const ChildModalForUserForm = ({user}) => {
    const [name, setName] = useState(user?.name)
    const [title, setTitle] = useState(user?.title)
    const submitHandler = (e) =>{
         // process form data and fire request.
        // however, not able to access title state here.
        // but setTitle is acceessible
    }

    return (
        <>
            <ParentModal
                name={`hello world`}
                primaryButtonHandler={submitHandler}
            >
                ~~~~~
            </ParentModal>
        </>
    )
}

export default ChildModalForUserForm;

标签： javascriptreactjs