学习react （fiveday）
列表：
- 来看一组对比例子，JS和JSX的对比
//js实现把一个数组中的每一项变两倍，并且打印
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
//在JSX中
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
小结：在JSX中，当你创建一个元素的时候，必须包含一个特殊的key属性， key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。 同vue中v-for中的：key差不多，元素key要放在就近数组的上下文，就是在那里循环放哪里，key在兄弟节点上唯一，但不是全局唯一，这个应该和 tree diff 有关
- 在JSX中嵌入map
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number*2} />
)}
</ul>
);
}
//展示的结果是2，4,6,8,10
处理多个输入
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.name === 'isGoing' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
参与:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
来宾人数:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
小结：主要通过name不同，然后触发相同的事件处理函数，然后通过事件对象的name属性判断出是哪一个对象触发的事件，然后做对应的处理
