React-14：React中的事件处理

React中的事件处理

 class Demo extends React.Component {
      render() {
        return (
          <div>
            <input ref={CurrentNode => this.input1 = CurrentNode} type="text" placeholder="点击左侧按钮提示数据" />
            <button onClick={this.ShowData}>点击提示左侧数据</button>
            <input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
          </div>
        )
      }
      ShowData = () => {
        let { input1 } = this
        alert(input1.value)
      }
      showData2 = (event) => {
        // ref 尽量少用 所以使用 event 
        console.log(event.target);
        alert(event.target.value)
      }
    }
    ReactDOM.render(<Demo />, document.querySelector('#test'))

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

• React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

传统的 HTML：

<button onclick="activateLasers()">
  Activate Lasers
</button>

在 React 中略微不同：

通过event.target得到发生事件的DOM元素对象
在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault。

 <button onClick={this.ShowData}>点击提示左侧数据</button>
   ShowData = (event) => {
       e.preventDefault();
       // ref 尽量少用 所以使用 event 
        console.log(event.target);
      }