问题:打开模块式模态

Question

我正在为一个学校项目开发一个基于材料UI的React.js应用程序。我的项目基于资料UI文档中的React + Material + Firebase示例。目前，我正在尝试使用React Hooks，这样我就可以避免使用Redux (并在将来开发的东西上做得更好)。在app组件中，它们有一个openDialog函数，作为一种基于dialogId的模式打开方式。

class App extends Component {
  constructor(props) {
    super(props);

this.state = {
  signUpDialog: {
    open: false
  },

  signInDialog: {
    open: false
  },

  settingsDialog: {
    open: false
  },

  signOutDialog: {
    open: false
  }
};
}

// CURRENT, NON-HOOKS WAY
openDialog = (dialogId, callback) => {
   const dialog = this.state[dialogId];

   if (!dialog || dialog.open === undefined || null) {
     return;
   }
   dialog.open = true;

   this.setState({ dialog }, callback);
 };

然后他们就有了一个Navbar，而不是用相应的对话框(例如onSignUpClick={() => this.openDialog('signUpDialog')})调用这个函数，我目前正试图用钩子把它移过去。

有人能帮我教/帮我转换这个模块功能吗？

Answer 1

const [dialog, setDialog] = useState({
  isOpensignUp: false,
  isOpenSignIn: false,
  isOpenSignOut: false,
  isOpenSetting: false
});

const handleDialog =  e  => {
  setDialog({...dialog,[e.target.name]:true});
}

<button name= "isOpensignUp" onClick={handleDialog} />
<Dialog open={dialog.isOpensignUp}>

Answer 2

import React from 'react'

function App({ callback }) {

  // if we just mind about the active dialog,
  // we don't need to save the state of the others
  const [dialog, setDialog] = React.useState(null)

  // here useEffect is called every time, dialog changed,
  // we also need to put `callback` in the array otherwise
  // React throw a warning.

  // React.useEffect act like `ComponentDidMount`, so we better
  // check dialog is not empty otherwise it will call our callback
  // straight away AFTER the render and that's not what we want
  React.useEffect(() => {
    if (dialog) callback()
  }, [dialog, callback])

  // You said we were in a navBar so i can assume you can do 
  // something like this
  return (
    <div>
      {['signUp', 'signInDialog', 'settingsDialog', 'signOutDialog'].map(
        elem => (
          <div key={elem} onClick={() => setDialog({ [elem]: true })}>
            {elem}
          </div>
        ),
      )}
    </div>
  )
}

export default App