Своё синтетическое событие React

226

26 декабря 2017, 18:41

Доброго времени суток, начал изучать 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>