How to make other button functions automatically run when a button is clicked-CodePudding

I clicked the Button and executed the onClickUserId function.
Then, if I run this function, I want to run the onClickListContent Button function as well. I don't know what to do.

I want to display the argument value in the console.log so that onClickListContent is automatically clicked when the onClickUserId value is clicked.


const onClickUserId = (id) => {
    console.log(id)
  }


const onClickListContent = (Content) => {
    console.log(Content);
};

return (
    <div>

    <>
    <div>
    <button onClick={() => onClickUserId(3)}>click</button>
    </div>
    </>

    <>
    <div>
    <button onClick={() => onClickListContent(6)}>click</button>
    </div>
    </>

    </div>
)

I tried to put the onClickListContent.click() function in the onClickUserId function, but it cannot be executed because of the argument value. How should I write the code?

CodePudding user response：

import {useRef} from 'react'
export default function App() {
  const ref = useRef()
  const onClickUserId = (id) => {
    console.log(id);
    ref.current.click();
  };

  const onClickListContent = (Content) => {
    console.log(Content);
  };

  return (
    <div>
      <>
        <div>
          <button onClick={() => onClickUserId(3)}>click</button>
        </div>
      </>

      <>
        <div>
          <button ref={ref} onClick={() => onClickListContent(6)}>click</button>
        </div>
      </>
    </div>
  );
}

you can create a reference to that button and use it trigger the click function.

CodePudding user response：

use react useRef() hook:


const listContentBtn = useRef(null);

const onClickUserId = (id) => {
    console.log(id)
    listContentBtn.current.click()
  }


const onClickListContent = (Content) => {
    console.log(Content);
};

return (
    <div>

    <>
    <div>
    <button onClick={() => onClickUserId(3)}>click</button>
    </div>
    </>

    <>
    <div>
    <button onClick={() => onClickListContent(6)} ref={listContentBtn}>click</button>
    </div>
    </>

    </div>
)

CodePudding user response：

just use one function to pass the arguments then call your content function inside the onclickuserid function

const onClickUserId = (id,Content) => {
    console.log(id)
    onClickListContent(content)
  }


const onClickListContent = (Content) => {
    console.log(Content);
};

return (
    <div>
    <>
    <div>
    <button onClick={() => onClickUserId(3,6)}>click</button>
    </div>
    </>

    </div>
)