[Class] war against its own finishing components react notes

Components : React component is the core, the essence, the first letter of the name of the component to be capitalized
1. The status of the component (class components)

class One extends React.Component{
	render(){
		return ( 
			<div>我是一个状态组件</div>
		 )
	}
}
export default One;

注意：
* 状态组件是通过class来定义的，需要继承 React.Component 类
* render 方法返回的内容即是该组件的内容
* 类的名字即是组件的名字
* 属性是不允许被修改的，状态是可以修改的
* 状态：只有在状态组件当中才存在，它是允许被修改的，状态是从父级继承过来的

2. Stateless components (function component)

function One() {
	return ( 
		<div>One</div>
	 )
}
export default One;

注意：
* 函数的名字即是组件的名字，函数的返回值即是组件的内容
* 返回的内容有且只能有一个根元素。
* 必须要有return

3. The controlled components

注意：
* 下拉列表，文本框，单选，多选。如果该元素当中使用 value 属性，那么需要在该元素上增加 onChange 事件。
* 该组件会受到state的控制，如果要想改变文本的框的内容，需要通过 onChange 事件来改变 state
* defaultValue 初始值

class MyForm extends  React.Component{
	constructor(){
		super();
		this.state = {
			userName:"",
			passWord:""
		}
	}
	changeHandler(e){
		this.setState({
			[e.target.name]:e.target.value
		})
	}
	render(){
		return (
			<div>
				<input type="text" name="userName" onChange={this.changeHandler.bind(this)} value={this.state.userName}/>
				<input type="text" name="passWord" onChange={this.changeHandler.bind(this)} value={this.state.passWord}/>
				<input type="button" value="提交"/>
			</div>
		)
	}
}
ReactDOM.render((<MyForm></MyForm>),document.querySelector("#root"))

4. Non-controlled components

class My extends React.Component{
	constructor(){
		super();
		this.state = { userName:"" }
	}
	render(){
		return (
			<div>
				<div ref="myDiv">我会变成红色</div>
				<input type="text" defaultValue={this.state.userName} ref="userName"/>
				<input type="button" value="提交" onClick={()=>{
					this.refs.myDiv.style.color="red";
				}}/>
			</div>
		)
	}
}
ReactDOM.render((<My/>),document.querySelector("#root"))