react 创建项目
1.安装脚手架 npm install -g create-react-app
2.创建项目 npx create-react-app <项目名>
\
1.项目文件 .js
引入React，component
data值对应 this.state={}
@click事件 = onClick={this.click.bind(this,index)}
改变state值 this.setState({list: []})
\
2.组件用法
引用组件 important from
使用
父传子传参:
子组件接收 this.props.index
\
子组件方法注册
子组件改变父组件数据（通过调用父组件方法操作）
remove() {
this.props.remove()
}
\
3.子组件 constructor绑定this
constructor(props){ super(props) this.remove=this.remove.bind(this) }
\
4.单项数据流
子组件不能直接改变父组件数据，只能通过调用父组件方法改变父组件数据
表单事件的响应及bind绑定事件
响应事件onChange={this.handleChange}
bind绑定事件onChange={this.handleChange(this,'name')}
bind示例：
var MyForm = React.createClass({
getInitialState:function () {
return{
username:'',
gender:'man',
checked:true
}
},
handleChange:function(name,event) {
var newState = {};
newState[name] = name == 'checked' ? event.target.checked : event.target.value;
this.setState(newState);
console.log(newState)
},
submitHandler:function(e) {
e.preventDefault();
var is = this.state.checked ? '是' : '不是';
var gender = this.state.gender == 'man' ? '帅哥' : '美女';
alert(this.state.username+ is + gender +'.');
},
render: function () {
return(<form onSubmit={this.submitHandler}>
<label htmlFor="username">请输入您的姓名</label>
<input type="text" name="username" onChange={this.handleChange.bind(this,'username')} value={this.state.username} id="username" />
<br/>
<label htmlFor="checkbox">是或否：</label>
<input type="checkbox" value="是否" name="checked" id="checkbox" onChange={this.handleChange.bind(this,'checkbox')} checked={this.state.checked} />
<br/>
<label htmlFor="username">请选择</label>
<select name="gender" onChange={this.handleChange.bind(this,'gender')} value={this.state.gender}>
<option value="man">帅哥</option>
<option value="woman">美女</option>
</select>
<br/>
<button type="submit">提交</button>
</form>)
}
});
ReactDOM.render(
<MyForm />,
document.getElementById('reactContainer')
)
name复用：直接读取表单的属性值，比bind写法少一个参数
var MyForm = React.createClass({
getInitialState:function () {
return{
username:'',
gender:'man',
checked:true
}
},
handleChange:function(event) {
var newState = {};
newState[event.target.name] = event.target.name == 'checked' ? event.target.checked : event.target.value;
this.setState(newState);
console.log(newState)
},
submitHandler:function(e) {
e.preventDefault();
var is = this.state.checked ? '是' : '不是';
var gender = this.state.gender == 'man' ? '帅哥' : '美女';
alert(this.state.username+ is + gender +'.');
},
render: function () {
return(<form onSubmit={this.submitHandler}>
<label htmlFor="username">请输入您的姓名</label>
<input type="text" name="username" onChange={this.handleChange} value={this.state.username} id="username" />
<br/>
<label htmlFor="checkbox">是或否：</label>
<input type="checkbox" value="是否" name="checked" id="checkbox" onChange={this.handleChange} checked={this.state.checked} />
<br/>
<label htmlFor="username">请选择</label>
<select name="gender" onChange={this.handleChange} value={this.state.gender}>
<option value="man">帅哥</option>
<option value="woman">美女</option>
</select>
<br/>
<button type="submit">提交</button>
</form>)
}
});
ReactDOM.render(
<MyForm />,
document.getElementById('reactContainer')
)
3.可控组件：将表单中的值存储到state中 setState
特点：
1.符合react的单向数据流，即从state流向render输出的结果
2.数据存储在state中，便于访问和处理
var MyForm = React.createClass({
getInitialState:function() {
return {value:'jspang'}
},
handleChange:function(event) {
this.setState({value:event.target.value});
console.log(this.state.value)
},
render:function() {
return(
<div>
<input type="text" value={this.state.value} onChange={this.handleChange}/>
</div>
)
}
});
ReactDOM.render(
<MyForm />,
document.getElementById('reactContainer')
)
不可控组件
var MyForm = React.createClass({
handleChange:function() {
let txt = ReactDOM.findDOMNode(this.refs.jspang).value
console.log(txt)
},
render:function() {
return (
<div>
<input type="type" ref="jspang" onChange={this.handleChange}/>
</div>
)
}
});
ReactDOM.render(
<MyForm />,
document.getElementById('reactContainer')
)
