Как я могу запустить методы DOM-API, такие как .click () в componentDidMount () с laravel-mix - PullRequest
Новая
       6

Как я могу запустить методы DOM-API, такие как .click () в componentDidMount () с laravel-mix

0 голосов
/ 24 января 2019

Я бы хотел включить функцию onClick, когда реагирует монтирование компонентов (рендеринг).Мне нравится использовать Javascript DOM API метод .click ().Он отлично работает в приложении реакции (без laravel-mix) и вне курса в консоли.

Что мне нужно сделать, чтобы получить ту же функциональность в приложении laravel-реагировать с laravel-mix ???

Ожидаемый результат: окно предупреждения с сообщением, на которое нажали

Фактический результат: ничего 

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

1 Ответ

0 голосов
/ 24 января 2019

Вы можете использовать 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();
...