组件协同：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>父子关系</title>
</head>
<body>
<script src="react.js"></script>
<script src="JSXTransformer.js"></script>
<script type="text/jsx">
var GenderSelect = React.createClass({
render: function() {
return <select onChange={this.props.handleSelect}>
<option value="0">男</option>
<option value="1">女</option>
</select>
}
});
var SignUpForm = React.createClass({
getInitialState:function(){
return {
name:"",
password:"",
gender:""
}
},
handleChange:function(name,event){
var newState = {};
newState[name] = event.target.value;
this.setState(newState);
},
handleSelect: function (event) {
this.setState({gender: event.target.value})
},
render: function () {
console.log(this.state);
return <form>
<input type="text" placeholder="请输入用户名" onChange = {this.handleChange.bind(this,‘name‘)}/>
<input type="password" placeholder="请输入密码" onChange = {this.handleChange.bind(this,‘password‘)}/>
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
</form>
}
});
React.render(<SignUpForm></SignUpForm>,document.body);
</script>
</body>
</html>
mixin：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Mixin</title>
</head>
<body>
<script src="react.js"></script>
<script src="JSXTransformer.js"></script>
<script type="text/jsx">
var BindingMixIn = {
handleChange: function (key) {
var that = this;
return function(event){
var newState = {};
newState[key] = event.target.value;
that.setState(newState);
}
}
};
var BindingExample = React.createClass({
mixins:[BindingMixIn],
getInitialState: function () {
return {
text: ‘‘,
comment:‘‘
}
},
render: function () {
return <div>
<input type="text" placeholder="请输入内容" onChange={this.handleChange(‘text‘)}/>
<textarea placeholder="请输入内容" onChange={this.handleChange(‘comment‘)}></textarea>
<p>{this.state.text}</p>
<p>{this.state.comment}</p>
</div>
}
})
React.render(<BindingExample></BindingExample>, document.body)
</script>
</body>
</html>
时间： 2024-10-29 16:35:55