react学习之路（一）

react出道已久，不过我在实习期才正式接触react，从头开始学习，将自己学习的一些心得体会记录下来

1、先封装一个简单的react组件

class HelloWorld extends React.Component{
	render(){
		return (
			<div>
				<span>react</span>
				<span>hello world</span>
			</div>
		)
	}
}
ReactDOM.render(<HelloWorld />,document.getElementById("app"))

2、复合组件

class Hello extends React.Component{
	render(){
		return (
			<div>
				<span>hello</span>
				<World />
			</div>
		)
	}
}
class World extends React.Component{
	render(){
		return (
			<div>
				<span>world</span>
			</div>
		)
	}
}

ReactDOM.render(<Hello />,document.getElementById("app"))

3、react state（状态）

只需要更新组件中的state，然后根据新的state渲染用户界面

class ClickButton extends React.Component{	
	constructor(){
		super()
 		this.state={g_ : false};
 	},
	handleClick(){
		this.setState({g_ : !this.state.g_})
	},
	render(){
		var text = this.state.g_? "不在家" : "在家";
		return (
			<h1 onClick={this.handleClick.bind(this)}>在家吗？{text}</h1>
		)
	}
}
	ReactDOM.render(<ClickButton />,document.getElementById("app"))

4、react props
父子组件通信，通过props传递数据

class Message extends React.Component{
	constructor(){
		super();
		this.state = {					
			message:["我是第一条信息","我是第二条信息","我是第三条信息"]
		};
	}
	render (){
		return (
			<SubMessage message = {this.state.message} />
		)
	}
}

class SubMessage extends React.Component{
	 render(){
	 	return ( <p>{this.props.message}</p> )
	 }
 }
ReactDOM.render(
	<Message />,document.getElementById("app")
)

5、事件

class FormApp extends React.Component{
		constructor(props){
		        super(props);
		        this.state = {
					inputValue:"hello react",
					selectValue:"B",
		        };
    		}
		handleSubmit(e){
				e.preventDefault();
				console.log(this.refs.testInput.value);
				console.log(this.refs.testSelect.value);
			}
		render(){
				return (
					<form onSubmit={this.handleSubmit.bind(this)}>
						<input type="text" ref="testInput" defaultValue = {this.state.inputValue} /><br/>
						<select ref="testSelect" defaultValue = {this.state.selectValue}>
							<option value="A">A</option>
							<option value="B">B</option>
							<option value="C">C</option>
						</select><br/>
						<button type="submit">submit</button>
					</form>
				)
			}
		}
ReactDOM.render(<FormApp />,document.getElementById("app"))

注意事件绑定bind(this)，或者用箭头函数 e=>this.handleSubmit(e)