JSX中ES6備忘

簡介

JSX是超文字標記語言的擴充套件，允許HTML與JavaScript的共存。

ES6中的括號

• {}
  花括號中的內容，babel會當做JavaScript來解譯
• []
  從ECMAScript 2015開始，物件初始化程式語法還支援計算屬性名稱。這允許您將表示式放在括號中[]，該表示式將被計算並用作屬性名稱。

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

ReactDOM.render(
  <Reservation />,
  document.getElementById('root')
);

上面程式碼中setState中用到[name]: value，暫時理解為用來引用變數。如果只寫name，name就是指為this.state中key為name的變數賦值為value。注意this.setState中的this指的是Reservation元件

ES6中的箭頭函式

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
http://es6.ruanyifeng.com/#docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0