Какие-нибудь альтернативы "e" в обработчиках событий в React? - PullRequest
Новая
       4

Какие-нибудь альтернативы "e" в обработчиках событий в React?

1 голос
/ 24 января 2020

У меня есть следующий фрагмент кода React, 

import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");
const app = (
  <div className="App">
    <input
      type="button"
      value="Click me"
      onClick={e => alert(e.target.value)}
    />
  </div>
);

ReactDOM.render(app, rootElement);

Здесь я использовал e для захвата объекта события. Существуют ли другие альтернативы, которые я могу использовать в функциях обработчика событий вместо e для выполнения тех же операций?

Ответы [ 4 ]

2 голосов
/ 24 января 2020

Использование refs

import React, { useRef } from "react";
import ReactDOM from "react-dom";

const app = () => {
 const input = useRef()

 return (
  <div className="App">
    <input
      ref={input}
      type="button"
      value="Click me"
      onClick={() => alert(input.current.value)}
    />
  </div>
 )
}


const rootElement = document.getElementById("root");

ReactDOM.render(app, rootElement);
1 голос
/ 24 января 2020

Это просто псевдоним для объекта event . Не обязательно обозначать его только e , но оно показывает, что это событие.

Теперь по вашему вопросу, который я видел в заголовке поста и в комментарии. Вы можете использовать его по-разному в соответствии с вашим дизайном компонентов.

Функциональный: 

const funComponent = (props)=>{
    const clickHandler = e=>{ 
       // use it here
    }

    return (<div className="App">
    <input
      type="button"
      value="Click me"
      onClick={clickHandler} // <----bind it here
    />
  </div>);

};

Класс: 

class ClassComponent extends React.Component{
    const clickHandler = e=>{ 
       // use it here
    }

    render(){
        return(<div className="App">
                   <input
                      type="button"
                      value="Click me"
                      onClick={this.clickHandler} // <----bind it here
                />
      </div>);
    }

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

React поддерживает все стандартные HTML атрибуты и события.

Поскольку input является стандартным HTML элементом , его события обрабатываются объектом события .

Вы можете реализовать оболочку (как и любую библиотеку пользовательского интерфейса) и использовать любую альтернативу, wi sh. 

// The wrapper handles the event object internally
<Input onChange={(value) => setMyValue(value)} />
.
0 голосов
/ 24 января 2020

«e» в вашем примере - начало функции стрелки. Это то, что вы объявляете как wi sh, затем вы используете его внутри функции.

Вы можете изменить сначала «e» на любое имя переменной, которое вы будете sh, а затем использовать его внутри своей функции. .

Для дальнейшего чтения я рекомендую вам эту статью о функциях стрелок.

...