React native：如何将 class 组件代码转换为带有钩子的 function 组件？

Question

如何将以下代码转换为带有钩子的 function 组件？ 在我的示例中，我使用 class 组件并且我想将代码更改为 function 组件形式

export default class Modal2 extends Component {
  state = {
    placeName: "",
    errorMsg: null
  };

placeNameChangedHandler = val => {
    this.setState({
      placeName: val,
      errorMsg: null
    });
  };

onConfirm = () => {
    const { placeName } = this.state;
    const { onConfirm, onHideModal } = this.props;
    if (placeName.trim().length > 5) {
      onConfirm("Cancel", placeName);
      onHideModal();
      this.setState({ placeName: "", errorMsg: null })
    } else {
      this.setState({ errorMsg: "must 5 letters" });
    }
  };
}

Answer 1

这就是转换后的样子。

import React, { useState } from 'react';

function Modal2(props) {
 const [desiredStateName, setDesiredStateName] = useState({
    placeName: "",
    errorMsg: null
  });


placeNameChangedHandler = val => {
  setDesiredStateName({
      placeName: val,
      errorMsg: null
    });
  };

onConfirm = () => {
    const { placeName } = desiredStateName.placeName;
    const { onConfirm, onHideModal } = props;
    if (placeName.trim().length > 5) {
      onConfirm("Cancel", placeName);
      onHideModal();
      setDesiredStateName({ placeName: "", errorMsg: null })
    } else {
     setDesiredStateName((prevState)=>{
        return{ ...prevState,errorMsg: "must 5 letters" }
    })
  }
  };
}
export default Modal2;

此外，快速指南，您如何能够自己做到这一点

Answer 2

尝试用以下代码替换您的代码：

import React, { useState } from 'react';

export default Modal2 = props => {

    const [placeName, setPlaceName] = useState("")
    const [errorMsg, setErrorMsg] = useState(null)

    placeNameChangedHandler = val => {
        setPlaceName(val)
        setErrorMsg(null)
    };

    onConfirm = () => {
        const { onConfirm, onHideModal } = props;
        if (placeName.trim().length > 5) {
            onConfirm("Cancel", placeName);
            onHideModal();
            setPlaceName("")
            setErrorMsg(null)
        } else {
            setErrorMsg("must 5 letters")
        }
    };
}