简介
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
