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

Question

How can I turn the following code into a function component with hooks? In my example I use a class component And I want to change the code to a function component form

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

That's how it should look after converting it.

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;

Also, a quick guide of how you are able to do it by yourself

Answer 2

Have a try by replacing your code with the below code:

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")
        }
    };
}