React學習筆記（六）事件處理

React學習筆記（六）

5、事件處理

• React事件綁定屬性的命名採用駝峯寫法，不一樣於傳統DOM所有小寫。
• 若是採用JSX的語法，事件函數須要用大括號{}包裹函數名，不一樣於傳統DOM字符串小括號的方式。

<button onClick={ activateLasers }>
    Activate Lasers
</button>

• 在React中另外一個不一樣是你不能使用返回false的方式阻止默認行爲，必須明確使用preventDefault來阻止。

function handleClick() {
    e.preventDefault();
    console.log('The link was clicked.');
}

return (
    <a href="#" onClick={ handleClick }>
        CLICK ME
    </a> 
);

React一般在元素初始渲染的時候提供一個事件，而後綁定給元素便可：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true
    };
    
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  
  render() {
    return (
      <button onClick={ this.handleClick }>
        { this.state.isToggleOn ? 'ON' : 'OFF' }
      </button>
    );
    
  }
  
}

ReactDOM.render(
  <Toggle />,
  document.querySelector('#root')
);

注意這裏使用了bind方法來指向this爲當前類的實例。若是不想使用bind能夠使用【屬性初始化器】來解決。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true
    };
    
    // this.handleClick = this.handleClick.bind(this);
  }
  
  // 這裏使用了箭頭函數
  // React文檔稱爲【屬性初始化器】
  // React文檔推薦使用這兩種方式
  handleClick = () => {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  
  render() {
    ...
  }
}

ReactDOM.render(
  <Toggle />,
  document.querySelector('#root')
);

還能夠在回調函數中使用箭頭函數（這樣作可能有性能問題）：

若是這個回調函數做爲一個屬性值傳入低階組件，這些組件可能會進行額外的從新渲染。

class Toggle extends React.Component {
  constructor(props) {
    ...
  }
  
  handleClick() {
    ...
  }
  
  render() {
    // 這裏使用了箭頭函數
    return (
      <button onClick={ e => this.handleClick(e) }>
        { this.state.isToggleOn ? 'ON' : 'OFF' }
      </button>
    );
    
  }
  
}

ReactDOM.render(
  <Toggle />,
  document.querySelector('#root')
);

1. 向事件處理程序傳遞參數

兩種方式：

• 箭頭函數 <button onClick={ e => this.deleteRow(id, e) }>Delete Row</button>
• bind方法 <button onClick={ this.deleteRow.bind(this, id) }>Delete Row</button>

經過箭頭函數傳遞的參數就是方法被調用寫得順序入參。
而bind方法傳遞的參數，總體排在e事件對象前面：

class Popper extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'Hello world!',
      id: '001'
    };
  }
  
  preventPop(id, name, e) {
    e.preventDefault();
    alert(id + ': ' + name);
  }
  
  render() {
    return (
      <div>
        <p>Pass Params</p>
        { /* Pass params via bind() method. */ }
        <a href="https://google.com" onClick={ this.preventPop.bind(this, this.state.id, this.state.name) }>Click Me</a>
      </div>
    );
  }
}

ReactDOM.render(
  <Popper />,
  document.querySelector('#root')
);

運行效果：

The end... Last updated by: Jehorn, April 15, 2019, 6:30 PM