事件

import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';

class People extends Component {
  constructor(props){
    super(props);
    this.state = {
      name: 'sisi',
      school: 'hust',
      age: '23'
    }
  }
 handleOnfocus = (ev,varible) => {
  console.log(ev.target.placeholder);
  console.log(varible)
 }
  render(){
    return <div>
      名字：<input type='text'  onFocus={this.handleOnfocus()} placeholder='name'/><br />
      學校：<input type='text'  placeholder='school'/><br />
      年紀：<input type='text'  placeholder='age'/>
    </div>
  }
}

ReactDOM.render(
  <People name={'jianwen'} />,
  document.getElementById('example')
  )

上面代碼中，onFocus={this.handleOnfocus('haha')},是表示當即執行this.handleOnfocus函數,即便沒有觸發onFocus,由於只有這樣寫onFocus={this.handleOnfocus}才表示觸發focus事件就執行。 爲了能夠傳遞參數，咱們修改handleOnfocus函數爲下面這樣：

handleOnfocus = (variable) => {
    return (ev) => {
  console.log(ev.target.placeholder);
  console.log(varible)
 }
}

而且不能寫成下面的形式

handleOnfocus = (variable) => {
    return (ev,variable) => {
  console.log(ev.target.placeholder);
  console.log(varible)
 }
}