如何使用反应钩子将我的 class 和 render() 转换为功能组件？

Question

I'm trying to convert my class to a functional component but I'm having trouble with the isInputActive . This is what the class looks like:

BEFORE

class HelloWorld extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isInputActive: false,
        };
      }

render() {
    const focusHandler = () => {
      onChange('');
      this.setState({
        isInputActive: true,
      });
    };

And in my return() , I've got this:

<input
  onBlur={() => {
  this.setState({ isInputActive: false });
  }}
 />

So, I tried converting it as seen below:

I converted the class to a const:

AFTER

const HelloWorld = ({ isInputActive }) => {
  const [isInputActive, setIsInputActive] = useState(false);

Then my render() was converted as seen here:

const focusHandler = () => {
    onChange('');
    setIsInputActive(true);
  };

And finally, I assumed that my <input> in the return() would look like this (the setState became useState which I'm not sure if it's correct either):

onBlur={() => {
 useState({ isInputActive: false });
  }}

Does anyone know what it should look like? to make it work without erroring? Where I've done const PinInput = ({ isInputActive }) => { I get an error: Parsing error: Identifier 'isInputActive' has already been declared

My code might be wrong so you can ignore the AFTER if you want. I'm just trying to make sure I get rid of the render().

Answer 1

Change,

onBlur={() => {
 useState({ isInputActive: false });
}}

To,

onBlur={() => {
 setIsInputActive(false);
}}

Reason you are getting this error, Parsing error: Identifier 'isInputActive' has already been declared is because, You are already declaring the variable isInputActive here,

const [isInputActive, setIsInputActive] = useState(true);

And it already hold the value of true .

To make it false just do setIsInputActive(false) ..

Answer 2

You can try replacing your code like this:


import React from "react";

function HelloWorld() {
  
  const [isInputActive, setIsInputActive] = React.useState(true);

  return (
    <>
      <input
        onBlur={() => {
          setIsInputActive(false);
         }}
        />
    </>
  );
}