const App = (): JSX.Element => {
    const [isShow, setIsShow] = useState(true)

    useEffect(() => {
        console.log(`is show: ${isShow}`)
    },[isShow])

    const handleClick = () => {
        console.log('call setIsShow')
        setIsShow(!isShow)
    }

    const onClick = () => {
        $('.bt1').trigger('click') // click on the button with the class name is `bt1`
        // call below code after state `isShow` change
        console.log('hello world')
        ...
    }
    return (
        <div>
            <div className='container'>
                <div style={{height: '200px', backgroundColor: 'red'}}/>
                {isShow && <div className='green_container' style={{height: '200px', backgroundColor: 'green'}}/>}
                <div style={{height: '200px', backgroundColor: 'blue'}}/>
            </div>

            <button onClick={handleClick} className='bt1'>Click...</button>
            <button onClick={onClick}>GOGO</button>
        </div>
    );
};

on the above code, My action is...

1. click button GOGO
2. $('.bt1').trigger('click') is calling
3. function handleClick is calling for print message and change IsShow state

My Question is:

How can I print hello world and another command that below line $('.bt1').trigger('click') inside onClick function after state isShow change ?

CodePudding user response：

Don't use jquery in react. use the ternary operator to show text in Jsx.

const App = (): JSX.Element => {
    const [isShow, setIsShow] = useState(true)

    const handleClick = () => {
        setIsShow(!isShow)
    }
    const onClick = ()=>{
      setIsShow(false)// if you want.
     }
    return (
        <div>
            <div className='container'>
                <div style={{height: '200px', backgroundColor: 'red'}}/>
                {isShow && <div className='green_container' style={{height: '200px', backgroundColor: 'green'}}/>}
                <div style={{height: '200px', backgroundColor: 'blue'}}/>
            </div>

            <button onClick={handleClick} className='bt1'>Click...</button>
            <button onClick={onClick}>{isShow ? "Hello World":"GOGO"}</button>
        </div>
    );
};

CodePudding user response：

you can simply call handleClick in onClick funtion sth like this:

  const onClick = () => {
      handleClick()
        // call below code after state `isShow` change
        console.log('hello world')
        ...
    }

and use useEffect for listening to any change in isShow if you only want to click on button you can use ref

I changed your code in any way that might be needed for you take a look at this one:

import { useState, useRef, useEffect } from "react";

const App = () => {
  const [isShow, setIsShow] = useState(true);
  const btnRef = useRef();

  useEffect(() => {

    console.log(`is show: ${isShow}`);
  }, [isShow]);

  const handleIsShowChanged = () => {
    console.log("hello world");
  };

  const handleClick = () => {
    console.log("call setIsShow");
    setIsShow((prevState) => {
      handleIsShowChanged();
      return !prevState;
    });
  };
  const onClick = () => {
    btnRef.current.click();
  };
  return (
    <div>
      <div className="container">
        <div style={{ height: "200px", backgroundColor: "red" }} />
        {isShow && (
          <div
            className="green_container"
            style={{ height: "200px", backgroundColor: "green" }}
          />
        )}
        <div style={{ height: "200px", backgroundColor: "blue" }} />
      </div>

      <button ref={btnRef} onClick={handleClick} className="bt1">
        Click...
      </button>
      <button onClick={onClick}>{isShow ? "Hello World" : "GOGO"}</button>
    </div>
  );
};

export default App;