单击按钮时如何使其他按钮自动运行运行

Question

我点击了按钮并执行了 onClickUserId 函数。
然后，如果我运行这个函数，我也想运行 onClickListContent 按钮函数。我不知道该怎么办。

我想在 console.log 中显示参数值，以便在单击 onClickUserId 值时自动单击 onClickListContent。


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

我尝试将onClickListContent.click()函数放在onClickUserId函数中，但是由于参数值的原因无法执行。代码应该怎么写？

Answer 1

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

您可以创建对该按钮的引用并使用它触发点击功能。

Answer 2

使用 React useRef() 钩子：


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

单击按钮时如何使其他按钮自动运行运行

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

javascript

reactjs

button

frontend

单击按钮时如何使其他按钮自动运行 运行

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

javascript

reactjs

button

frontend

单击按钮时如何使其他按钮自动运行运行