简体   繁体   中英

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

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?

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>
)

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM