如何手动触发dom中的点击事件reactjs

我想手动触发输入元素上的onclick事件。我做了一些搜索，并写下如下代码。如何手动触发dom中的点击事件reactjs

<input type="date" ref={datePicker => this.datePicker = datePicker}/> 
      <button 
        onClick={(e) => { 
         this.datePicker.click() 
        }}> 
      Select the data 
      </button>

然后我也尝试下面的代码：

<input type="date" ref='datePicker'/> 
       <button 
         onClick={(e) => { 
          this.refs.datePicker.click() 
         }}> 
       Select the data 
       </button>

无的上面的代码工作。当我点击按钮时，没有任何反应。我希望打开数据选择器用户界面。

来源

2016-12-15 Zhao Yi

你可以使用jQuery吗？ –

@Ro如果reactjs支持此操作，我不想将其他依赖项带入我的应用程序 –

@CodeBling datePicker在标记中定义。我想显示由输入标签触发的日期选择器。 –

我都尝试你的例子，和<input>元素的.click()方法确实被调用。它不像你期望的那样工作的原因是它的点击只将键盘焦点放在元素中，它不会点击日期选择器。以编程方式打开日期选择器是currently not possible，至少不是在所有浏览器中。

来源

2016-12-15 03:21:58

有什么办法让我自定义 ui？ –

请参阅http://stackoverflow.com/a/15531938/675721。我认为你可以做些微小的调整，但不是真的。另请参阅https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome#how_do_i_change_the_appearance_of_the_date_picker –

尝试没有调用它作为一个功能：

onClick={(e) => {this.datePicker.click}}>

来源

2016-12-15 00:33:15

我试过它不起作用 –

如何手动触发dom中的点击事件reactjs

回答

相关问题