React Event

React Event.md

React Event

https://medium.com/@ericclemmons/react-event-preventdefault-78c28c950e46

https://facebook.github.io/react/docs/events.html

event.preventDefault();

// Let's stop this event.

event.stopPropagation();

// Really this time.

    
handleKeyDown(event) {
    if (event.keyCode === 13) {
        event.preventDefault(); // Let's stop this event.
        event.stopPropagation(); // Really this time.

        alert("Is it stopped?");
        // "Hahaha, I'm gonna submit anyway!" - Chrome
    }
}

 <Input handleChange={this.handleChange} {...this.props} />;

const {} = {...rest};

Spread_operator

only useful for Function (x, y, ...rest) => {} & Array [x, y, ...rest]

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator

扩展语法允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展。

let [a, b, ...c] = [1, 2, 3, 4];


let n = [a, b, ...c];


// 在需要使用`数组`作为函数的`参数`的情况下,通常使用v Function.prototype.apply `方法:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

// 如果使用了ES6的展开运算符,你可以这么写:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

Object ???

ES7/8

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

Destructuring_assignment

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

解构赋值 语法是一个Javascript表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。

let a, b, rest;

/* array 解构赋值 */
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

[a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

/* object 解构赋值 */
({a, b} = {a:1, b:2});
console.log(a); // 1
console.log(b); // 2

// ES7 - 试验性 (尚未标准化)
// Uncaught SyntaxError: Unexpected token ...
({a, b, ...rest} = {a:1, b:2, c:3, d:4});

https://rainsoft.io/how-three-dots-changed-javascript/

https://babeljs.io/docs/plugins/transform-object-rest-spread/

$ npm install --save-dev babel-plugin-transform-object-rest-spread

https://repl.it/languages/javascript

let { x, y } = { x: 1, y: 2, a: 3, b: 4 };


```

https://repl.it/examples

function Person(name, job) {
  this.name = name;
  this.job = job;
  this.print = function() {
    console.log(this.name + ', ' + this.job);
  };
}
var thatGuy = new Person("Jack", "coder");
thatGuy.print();

https://github.com/tc39/proposal-object-rest-spread

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names

event.nativeEvent.stopImmediatePropagation

Synthetic Events, not Native Events.

合成事件，而不是本地事件。

https://medium.com/@ericclemmons/react-event-preventdefault-78c28c950e46

https://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events#comment37772453_24415631

https://stackoverflow.com/questions/41464088/react-js-proxy-event

https://babeljs.io/docs/plugins/transform-class-properties/

css

https://stackoverflow.com/questions/4264527/vertical-text-direction

https://www.thecssninja.com/css/real-text-rotation-with-css

<p class="vericaltext">
Hi This is Vertical Text!
</p>



.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
}

Stateless function components & no refs

React & event.preventDefault() & event.stopPropagation();

https://gist.github.com/xgqfrms-GitHub/cc2598e0410542c504aa7fee4e2c8b9f#gistcomment-2136883