React: как передать параметр в функцию onBlur?

Question

Здравстуйте!

Подскажите, пожалуйста, как в функцию this.element.blur() передать параметр чтобы при срабатывании onBlur функции я мог этот параметр отловить?

Простая ситуация: Например, есть кнопка, при нажатии на которую снимается focus с input. Сделаем это, создав у input ref и вызовем this.element.blur(), когда нажмем. Также, focus снимется, когда мы выйдем курсором из input. Во обоих случаях сработает функция onBlurInput.

Однако, в этой функции, важно различать, кто был инициатором снятия focus: Это button или input.

Подскажите, пожалуйста, как это можно сделать?

class App extends React.Component {
  componentDidMount() {
    this.element.focus();
  }
  clickme = e => {
    this.element.blur();    //уберем focus  с input
  };

  onBlurInput = (e, source) => {
    if (source === "button") {
      console.log("focus убран с помощью buton");
    } else {
      console.log("focus убран с помощью input");
    }
  };
  render() {
    return (
      <div>
        <input
          type="text"
          name={"test"}
          onBlur={e => this.onBlurInput(e)}
          ref={el => (this.element = el)}
        />
        <button onClick={this.clickme}>Убрать focus c input</button>
      </div>
    );
  }
}

https://codesandbox.io/s/great-elgamal-sf6mr

Answer 1

Атрибут должен обязательно начинаться с 'data' см пример:

      let idClicked = parseInt(event.target.getAttribute('data-tag'))
      let numActiveRow = parseInt(event.target.getAttribute('data-row'))
// ------------------------------------------------------------------------

        <td className={className} key={property} data-tag={id} data-row={row}>
          {element}
        </td>

Answer 2

class App extends React.Component {
  componentDidMount() {
    this.element.focus();
  }
  clickme = e => {
    this.element.blur();
    this.onBlurInput('button')(e);
  };

  onBlurInput = (source) => (e) => {
    console.log(`focus убран с помощью ${source}`);
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name={"test"}
          onBlur={this.onBlurInput('input')}
          ref={el => (this.element = el)}
        />
        <button onClick={this.clickme}>Убрать focus c input</button>
      </div>
    );
  }
}

Хотя при клике на кнопку, onBlur от инпута тоже срабатывает, фокус ведь меняется

БЛОГ НА HUSL

React: как передать параметр в функцию onBlur?

Ответы (2 шт):