Question

当组件安装（渲染）时，我想触发onClick函数。我喜欢使用javascript DOM API方法.click（）。在react应用程序中（没有laravel-mix）和控制台中的偏离航向都可以很好地工作。

我该怎么做才能在具有laravel-mix的laravel-react应用程序中获得相同的功能？

预期输出：带有单击的消息的警报框

实际输出：无

//to fire onClick     
document.getElementById("imgInput").click()

//used in pure componentDidMount
 componentDidMount = () => {
    document.getElementById("imgInput").click();
};

//code on fire
_handleClick =()=>{
  alert('clicked');
}

 <button id="imgInput" onClick={this.handleClick} type="file">
        click me
 </button> 

//Edited with react ref

constructor(props) {
    super(props);

    this.imgInputRef = React.createRef();

  }

  componentDidMount = () => {

    if ( this.imgInputRef) {
      const $ref = this.imgInputRef;
      $ref.current.click();
    }

  };



  _onUploadImageHandler =  e => {
    // handeling image upload 
  };

  //rendering button
  <div>
    <input
      accept="image/*"
      type="file"
      multiple
      id="imgInput"
      ref={this.imgInputRef}

      onChange={this._onUploadImageHandler}
    />
    <label htmlFor="imgInput" style={{ width: "100%" }}>
      <Button
        htmlFor="imgInput"
        variant="contained"
        component="span"
        size="large"
        style={{ width: "100%" }}

      >
        <CloudUpload />
        <span>{uploadBtnText}</span>
      </Button>
    </label>
  </div>

Answer 1

您可以使用ref。它将引用基础html输入并使用其功能。使用ref代替document.getElementById("imgInput")是一个好方法

在您的渲染方法中：

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

创建ref的新方法是

// In constructor
this.myRef = React.createRef();
// in render method
<input ref={this.myRef} />

在事件处理程序中：

this.inputElement.click();

我如何使用laravel-mix触发componentDidMount（）中的.click（）之类的DOM-api方法

1 个答案: