WEB程序设计之课外学习1

React 中的响应式设计思想和事件绑定

要点：

1. state负责存取组间里的数据。
2. 如果要在JSX中用到JS表达式，需要用花括号括起来。
3. 事件绑定时用.bind(this)对函数的作用域进行变更。
4. 用.setState()改变数据内容。

代码：

import React, { Component, Fragment } from 'react';

class TodoList extends Component {

	constructor(props) {
		super(props);
		this.state = {
			inputValue: '',
			list: []
		}
	}

	render() {
		return (
			<Fragment>
				<div>
					<input 
						value={this.state.inputValue}
						onChange={this.handleInputChange.bind(this)}
					/>
					<button>提交</button>
				</div>
				<ul>
					<li>学习英语</li>
					<li>学习React</li>
				</ul>
			</Fragment>
		)
	}

	handleInputChange(e) {
		this.setState({
			inputValue: e.target.value
		})
	}
}

export default TodoList;

小结：

没有handleInputChange方法时，input框的内容不可以随输入改变，因为input.value始终为空。

因为我们实现了handleInputChange方法，所以可以在input框中自由输入内容，input.value随输入框内的内容（e.target.value）而实时变化。