Html 如何在ReactJS中手动触发点击事件？

如何在ReactJS中手动触发点击事件？ 当用户单击element1时，我想自动触发对

input

标记的单击

---

您可以使用

ref

回调，它将返回

节点

。在该节点上调用

click（）

，进行编程单击

获取

div

节点

clickDiv(el) {
  el.click()
}

<div 
  id="element1"
  className="content"
  ref={this.clickDiv}
  onClick={this.uploadLogoIcon}
>

将

ref

设置为

div

节点

clickDiv(el) {
  el.click()
}

<div 
  id="element1"
  className="content"
  ref={this.clickDiv}
  onClick={this.uploadLogoIcon}
>

检查小提琴

希望有帮助

您可以使用prop通过回调获取对底层对象的引用，将引用存储为类属性，然后使用该引用稍后使用该方法从事件处理程序触发单击

在

渲染方法中：

<input ref={input => this.inputElement = input} ... />

完整示例：

class MyComponent extends React.Component {
  render() {
    return (
      <div onClick={this.handleClick}>
        <input ref={input => this.inputElement = input} />
      </div>
    );
  }

  handleClick = (e) => {
    this.inputElement.click();
  }
}

类MyComponent扩展了React.Component{
render（）{
返回(
this.inputElement=input}/>
);
}
handleClick=（e）=>{
this.inputElement.click（）；
}
}

---

请注意，在回调中为

this

提供了正确的词法范围。还请注意，通过这种方式获取的对象与使用

document.getElementById

获取的对象类似，即实际的DOM节点。

在2018年5月的ES6中使用了以下内容 React文档作为参考：

import React，{Component}来自“React”；
类AddImage扩展组件{
建造师（道具）{
超级（道具）；
this.fileUpload=React.createRef（）；
this.showFileUpload=this.showFileUpload.bind（this）；
}
showFileUpload（）{
this.fileUpload.current.click（）；
}
render（）{
返回(
);
}
}
导出默认添加图像；

简单的旧js怎么样？ 例如：

autoClick=（）=>{
如果（某物===某物）{
var link=document.getElementById（'dashboard-link'）；
link.click（）；
}
};
......      
var clickIt=this.autoClick（）；
返回(
仪表板
);

试试这个，如果在您这边不起作用，请告诉我：

<input type="checkbox" name='agree' ref={input => this.inputElement = input}/>
<div onClick={() => this.inputElement.click()}>Click</div>

this.inputElement=input}/>
this.inputElement.click（）}>单击

---

单击

div

应该模拟在功能组件中单击

输入

元素

这一原则也适用，只是语法和思维方式略有不同

const UploadsWindow = () => {
  // will hold a reference for our real input file
  let inputFile = '';

  // function to trigger our input file click
  const uploadClick = e => {
    e.preventDefault();
    inputFile.click();
    return false;
  };

  return (
    <>
      <input
        type="file"
        name="fileUpload"
        ref={input => {
          // assigns a reference so we can trigger it later
          inputFile = input;
        }}
        multiple
      />

      <a href="#" className="btn" onClick={uploadClick}>
        Add or Drag Attachments Here
      </a>
    </>
  )

}

const UploadsWindow=（）=>{
//将保存我们真实输入文件的引用
让inputFile=''；
//函数来触发我们的输入文件单击
const uploadClick=e=>{
e、 预防默认值（）；
inputFile.click（）；
返回false；
};
返回(
{
//分配一个引用，以便我们以后可以触发它
输入文件=输入；
}}
倍数
/>
)
}

如果它在最新版本的reactjs中不起作用，请尝试使用innerRef

class MyComponent extends React.Component {


  render() {
    return (
      <div onClick={this.handleClick}>
        <input innerRef={input => this.inputElement = input} />
      </div>
    );
  }

  handleClick = (e) => {
    this.inputElement.click();
  }
}

类MyComponent扩展了React.Component{ render（）{ 返回( this.inputElement=input}/> ); } handleClick=（e）=>{ this.inputElement.click（）； } }

---

这是Hooks解决方案

    import React, {useRef} from 'react';

    const MyComponent = () =>{

    const myRefname= useRef(null);

    const handleClick = () => {
        myRefname.current.focus();
     }

    return (
      <div onClick={handleClick}>
        <input ref={myRefname}/>
      </div>
     );
    }

import React，{useRef}来自“React”；
常量MyComponent=（）=>{
const myRefname=useRef（null）；
常量handleClick=（）=>{
myRefname.current.focus（）；
}
返回(
);
}

imagePicker（）{
this.refs.fileUploader.click（）；
这是我的国家({
图像选择器：正确
})
}

使用React钩子和

import React，{useRef}来自“React”；
常量MyComponent=（）=>{
const myInput=useRef（null）；
常量clickElement=（）=>{
//要模拟用户聚焦输入，应使用
//内置的.focus（）方法。
myInput.current？.focus（）；
//要模拟单击按钮，可以使用.click（）命令
//方法。
//myInput.current？单击（）；
}
返回(
在输入中触发单击
);
}

在Aaron Hakala的答案上用useRef对这个答案进行重复

还有你的JSX：

<button onClick={() => clickElement(myRef)}>Click<button/>
<input ref={myRef}>

clickElement（myRef）}>单击

让定时器；
让isDoubleClick=false；
常量handleClick=（）=>{
如果（！isDoubleClick）{
isDoubleClick=true；
计时器=设置超时（（）=>{
isDoubleClick=false；
props.onClick（）；
}, 200);
}否则{
清除超时（计时器）；
props.onDoubleClick（）；
}
}
返回

查看一些外部库，以编程方式创建输入元素似乎是一个好主意：我不明白您为什么要在React中这样做。你想做什么？@tobiasandersen以编程方式聚焦

输入

元素是一个非常有效的用例，这可能是提问者希望通过编程触发的点击来完成的。是的，当然，聚焦和模糊都是完全有效的。但是点击呢？我这样问的原因是，如果聚焦是用例，那么最好表现出来。但是如果click真的是用例，那么最好只调用处理程序。@JohnWhite它可以被正确绑定：）但是你可能是对的，我的意思不是要说脏话。我只是想看看这背后的真正意图是什么。当你链接到一个JSFIDLE时，最好在这里至少放上相关的代码（顺便说一句：代码段编辑器也支持reactjs），值得注意的是，虽然string-ref方法并没有被弃用，它被认为是被基于回调的语法取代的遗留功能：

ref={elem=>this.elem=elem}

——这在中有详细说明。@JohnWhite有效建议。更新了答案！此外，您需要检查并确保

el

在您之前不是空的/未定义的

const myRef = useRef(null);

  const clickElement = (ref) => {
    ref.current.dispatchEvent(
      new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true,
        buttons: 1,
      }),
    );
  };

<button onClick={() => clickElement(myRef)}>Click<button/>
<input ref={myRef}>

  let timer;
  let isDoubleClick = false;

  const handleClick = () => {
    if(!isDoubleClick) {
      isDoubleClick = true;
      timer = setTimeout(() => {
        isDoubleClick = false;
        props.onClick();
      }, 200);
    } else {
      clearTimeout(timer);
      props.onDoubleClick();
    }
  }

return <div onClick={handleClick}></div>

this.buttonRef.current.click();