1

Доброго времени суток, начал изучать React js, столкнулся с вопросом - Можно ли создать своё синтетическое событие в React?

пересмотрел события связанные с мышью: onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp Нужного не нашел.

Возникла необходимость создать событие, которое при клике на любом элементе(грубо говоря теге "body", кроме того, на котором висит событие, происходила реакция.

Буду признателен за совет!

Событие хочу повесить на элемент input в компоненте task.

Впринципе как это сделать на jquery/native я понимаю, но вот в React...

  <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<style>
    .editor
    {
        width: 30%;
        background: aqua;
        height: 250px;
        margin: auto;
        display: block;
        border: dashed 3px yellow;
    }

    .task
    {
        width: 150px;
        min-height:50px;
        background:green;
        color:aqua;
        border: dashed 3px yellow;
    }

</style>

<div id='project'></div>

<script type="text/babel">
    var Task = React.createClass({
        getInitialState: function() {
    return {
        text: 'default text',
        sost: 1 
    };
},
txtChange:function()
{
    this.setState({ sost: 0 });
},
 txtChange2:function()
{
    this.setState({ sost: 1 });
},

        render: function()
        {
            return( 
                <div className="task">

                {  ((this.state.sost)==1) && <span onClick={this.txtChange}>{this.state.text}</span> }
                {  ((this.state.sost)==0) && <input onMouseOut={this.txtChange2} value={this.state.text} />  }
                    <button className="delete" onClick="">X</button>
                </div>
                );
        }
    });

    ReactDOM.render(
         <div><Task />   </div>,
        document.getElementById('project')
    );
</script>
</body>
</html>
4
  • 3
    Вопрос не до конца ясен, но если вы повесите onClick на самый верхний компонент (грубо говоря <App />), то клик на любом элементе станет триггером для вашего обработчика. target и currentTarget будут содержать элемент, вызвавший событие и элемент, на котором событие висит 25 дек 2017 в 22:17
  • 2
    e.preventDefault() не позволит событию подниматься выше по конмпонентам приложения 25 дек 2017 в 22:17
  • 1
    кстати, createClass больше не поддерживается 25 дек 2017 в 22:50
  • Ну как, получилось? 31 дек 2017 в 2:30

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.