React表单组件自定义-可控及不可控组件
2024-03-28 00:08:38
一、可控组件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var Radio = React.createClass({
getInitialState: function () {
return {
value: this.props.defaultValue
};
},
handleChange: function (event) {
if (this.props.onChange) {
this.props.onChange(event); }
this.setState({
value: event.target.value
});
},
render: function () {
var children = {};
var value = this.props.value || this.state.value;
React.Children.forEach(this.props.children, function (child, i) {
var label = <label>
<input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
{child.props.children}
<br/>
</label>;
children['label' + i] = label;
}.bind(this));
return <span>{children}</span>;
}
});
var MyForm = React.createClass({
getInitialState: function () {
return {my_radio: "B"};
},
handleChange: function (event) {
this.setState({
my_radio: event.target.value
});
},
submitHandler: function (event) {
event.preventDefault();
alert(this.state.my_radio);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<Radio name="my_radio" value={this.state.my_radio} onChange={this.handleChange}>
<option value="A">First Option</option>
<option value="B">Second Option</option>
<option value="C">Third Option</option>
</Radio>
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
二、不可控组件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var Radio = React.createClass({
getInitialState: function () {
return {
value: this.props.defaultValue
};
},
handleChange: function (event) {
if (this.props.onChange) {
this.props.onChange(event);
}
this.setState({
value: event.target.value
});
},
render: function () {
var children = {};
var value = this.props.value || this.state.value;
React.Children.forEach(this.props.children, function (child, i) {
var label = <label>
<input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
{child.props.children}
<br/>
</label>;
children['label' + i] = label;
}.bind(this));
return <span>{children}</span>;
}
});
var MyForm = React.createClass({
submitHandler: function (event) {
event.preventDefault();
alert(this.refs.radio.state.value);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<Radio ref="radio" name="my_radio" defaultValue="B">
<option value="A">First Option</option>
<option value="B">Second Option</option>
<option value="C">Third Option</option>
</Radio>
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
最新文章
- Oracle 中 union 和union all 的简单使用说明
- SQL: ROW_NUMBER
- S2 第二本书 深入.NET平台和C#编程 总结 by天命
- 問題排查：行動裝置網頁前端 UI 設計 (2)
- Linux Purify命令
- Lintcode: Kth Smallest Number in Sorted Matrix
- PHP太怪了，in_array() ,strpos,
- 认识与学习BASH
- struts (二)
- 设计模式之Birdge（桥接）模式
- C#基础练习（事件登陆案例）
- putty 连接ubuntu
- 导出Excel后其他按钮失效
- MYSQL存储过程和函数学习笔记
- Android实现 再按一次退出 的三种方法 durationTime、timerTask 和Handler
- linux的运行级别
- Raspberry Pi中可用的Go IDE：liteide
- 亲密接触Redis-第三天(Redis的Load Balance）
- centos7 源码安装php7
- 听大佬学长RQY报告有感