Skip to content

Commit e9c6ca7

Browse files
author
姚观寿
committed
rc-form 实现
1 parent b3fee80 commit e9c6ca7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+213337
-27369
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
{
2-
"liveServer.settings.port": 5507
1+
{
2+
"liveServer.settings.port": 5507
33
}

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
# react
2-
react 这是个react 源码逐行分析，并且是开源免费的，只需要你帮我们点个赞，多多支持下即可
1+
# react
2+
react 这是个react 源码逐行分析，并且是开源免费的，只需要你帮我们点个赞，多多支持下即可

‎RcForm.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title>Hello React!</title>
7+
<script src="./common/js/ajax.js"></script>
8+
<!--官方提供的 CDN 地址：-->
9+
<!-- <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
10+
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> -->
11+
<script src="./common/js/react.development.v16.13.1.js"></script>
12+
<script src="./common/js/react-dom.development.v16.13.1.js"></script>
13+
<!-- <script src="./common/js/browser-polyfill.5.8.38.js"></script> -->
14+
<!-- <script src="./common/js/react.v16.12.0.js"></script> -->
15+
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/babel-core/5.8.38/browser.min.js"></script> -->
16+
<script src="./common/js/browser.v5.8.38.js"></script>
17+
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.19/lodash.js"></script>
18+
19+
20+
21+
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/babel-core/5.8.38/browser-polyfill.js"></script> -->
22+
<!-- <script src="./common/js/browser.v5.8.38.js"></script> -->
23+
24+
25+
26+
27+
28+
29+
30+
31+
</head>
32+
<style>
33+
34+
</style>
35+
36+
<body>
37+
38+
<div id="example"></div>
39+
40+
41+
<script src="./RcForm/05校验.js" type="text/babel">
42+
43+
</script>
44+
45+
</body>
46+
47+
</html>

‎RcForm/01实现基本的propsForm属性.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
const createForm = (options) => {
2+
return (Component) => {
3+
return class Form extends React.Component {
4+
getForm() {
5+
return {
6+
getFieldsValue: () => {}, // 获取字段值得函数
7+
getFieldValue: () => {}, // 获取单个值得函数
8+
getFieldInstance: () => {}, // 获取字段实例
9+
setFieldsValue: () => {}, // 设置字段值
10+
setFields: () => {}, // 设置字段 新的值
11+
setFieldsInitialValue: () => {}, // 设置初始化值的函数
12+
getFieldDecorator: () => {}, // 用于和表单进行双向绑定，详见下方描述 装饰组件，促进双向绑定的修饰器
13+
getFieldProps: () => {}, // 创建待验证的表单 设置字段元数据，返回 计算被修饰组件的属性
14+
getFieldsError: () => {}, //获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error
15+
getFieldError: () => {}, //获取某个输入控件的 Error
16+
isFieldValidating: () => {}, //判断一个输入控件是否在校验状态
17+
isFieldsValidating: () => {}, // 判断字段是否在校验中
18+
isFieldsTouched: () => {}, //判断是否任一输入控件经历过 getFieldDecorator 的值收集时机 options.trigger
19+
isFieldTouched: () => {}, //判断一个输入控件是否经历过 getFieldDecorator 的值收集时机 options.trigger
20+
isSubmitting: () => {}, // 是否在 提交状态
21+
submit: () => {}, // 表单提交函数
22+
validateFields: () => {}, //验证字段,返回promise
23+
resetFields: () => {}, // 重置字段
24+
};
25+
}
26+
render() {
27+
const props = {
28+
form: this.getForm.call(this),
29+
};
30+
return <Component {...props} />;
31+
}
32+
};
33+
};
34+
};
35+
36+
class BaseForm extends React.Component {
37+
constructor(props) {
38+
super(props);
39+
}
40+
41+
componentDidMount() {
42+
console.log(this.props);
43+
debugger;
44+
}
45+
render() {
46+
return (
47+
<form>
48+
<input />
49+
<select>
50+
<option>1</option>
51+
</select>
52+
</form>
53+
);
54+
}
55+
}
56+
57+
const Form = createForm({ name: "abc" })(BaseForm);
58+
59+
ReactDOM.render(<Form />, document.getElementById("example"));

0 commit comments

Comments
 (0)