Skip to content

Commit 04399e9

Browse files
bplok20010bplok20010
committed
v1.4.0
新增 reset resetField 方法
1 parent 1b74f4a commit 04399e9

17 files changed

+191
-33
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,8 @@ export default function NativeInput(props) {
200200
```ts
201201
{
202202
getValue(name: string): any;
203+
reset(cb: () => void): void;
204+
resetField(cb: () => void): void;
203205
setValue(
204206
name: string,
205207
value: any,
@@ -235,6 +237,7 @@ export default function NativeInput(props) {
235237
{
236238
getDOM(): any;
237239
getForm(): Form;
240+
reset(cb: () => void): void;
238241
getValue(): any;
239242
setValue(value: any, callback: (formValue: {}) => void): void;
240243
hasError(): boolean;

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html style="width:100%;height:100%;overflow:auto"><head><meta charset="utf-8"><title>Layout</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><style>.demo{width:1100px;height:500px;margin:50px auto;background:#fff;font-size:12px;overflow:auto}.rw-layout-content{height:200px}.rw-layout.rw-layout-has-sider{text-align:center;background:#3ba0e9}.rw-layout-sider{width:200px;text-align:center;background:#3ba0e9;color:#fff}.rw-layout-footer,.rw-layout-header{background:#7dbcea;color:#fff;height:64px;line-height:64px;text-align:center}.rw-layout-content{background:rgba(16,142,233,1);color:#fff;text-align:center}</style><link href="static/css/2.71a0092d.chunk.css" rel="stylesheet"><link href="static/css/index.ebecbc26.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime~index.f795885b.js"></script><script src="static/js/2.71a0092d.chunk.js"></script><script src="static/js/index.ebecbc26.chunk.js"></script></body></html>
1+
<!doctype html><html style="width:100%;height:100%;overflow:auto"><head><meta charset="utf-8"><title>Layout</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><style>.demo{width:1100px;height:500px;margin:50px auto;background:#fff;font-size:12px;overflow:auto}.rw-layout-content{height:200px}.rw-layout.rw-layout-has-sider{text-align:center;background:#3ba0e9}.rw-layout-sider{width:200px;text-align:center;background:#3ba0e9;color:#fff}.rw-layout-footer,.rw-layout-header{background:#7dbcea;color:#fff;height:64px;line-height:64px;text-align:center}.rw-layout-content{background:rgba(16,142,233,1);color:#fff;text-align:center}</style><link href="static/css/2.71a0092d.chunk.css" rel="stylesheet"><link href="static/css/index.b2e6f73b.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime~index.f795885b.js"></script><script src="static/js/2.71a0092d.chunk.js"></script><script src="static/js/index.b2e6f73b.chunk.js"></script></body></html>

‎docs/manifest.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"index.css": "static/css/index.ebecbc26.chunk.css",
3-
"index.js": "static/js/index.ebecbc26.chunk.js",
2+
"index.css": "static/css/index.b2e6f73b.chunk.css",
3+
"index.js": "static/js/index.b2e6f73b.chunk.js",
44
"runtime~index.js": "static/js/runtime~index.f795885b.js",
55
"static/css/2.71a0092d.chunk.css": "static/css/2.71a0092d.chunk.css",
66
"static/js/2.71a0092d.chunk.js": "static/js/2.71a0092d.chunk.js",

‎docs/static/css/index.ebecbc26.chunk.css renamed to ‎docs/static/css/index.b2e6f73b.chunk.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/index.b2e6f73b.chunk.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/index.ebecbc26.chunk.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎esm/Form.js

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function (_React$Component) {
2727

2828
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
2929

30-
_defineProperty(_assertThisInitialized(_this), "fieldLockId", 1);
30+
_defineProperty(_assertThisInitialized(_this), "fieldLocks", {});
3131

3232
_defineProperty(_assertThisInitialized(_this), "formLockId", 1);
3333

@@ -54,6 +54,8 @@ function (_React$Component) {
5454
var _proto = Form.prototype;
5555

5656
_proto.addField = function addField(field) {
57+
var name = field.props.name;
58+
field._initialValue = this.getValue(name);
5759
this.fields.push(field);
5860
};
5961

@@ -67,6 +69,40 @@ function (_React$Component) {
6769
}
6870
};
6971

72+
_proto.reset = function reset(cb) {
73+
var initialFormValue = {};
74+
this.fields.forEach(function (field) {
75+
initialFormValue[field.props.name] = field._initialValue;
76+
});
77+
this.fieldLocks = {};
78+
this.formLockId++;
79+
this.state.validatingFields = {};
80+
this.state.formValue = initialFormValue; // this.formError = {};
81+
82+
this.cleanErrors(); // this.setState({
83+
// formError: {},
84+
// validatingFields: {},
85+
// formValue: initialFormValue
86+
// });
87+
88+
this.setValues({}, cb);
89+
};
90+
91+
_proto.resetField = function resetField(name, cb) {
92+
this.cleanError(name);
93+
var initialValue;
94+
this.fields.forEach(function (field) {
95+
if (field.props.name === name) {
96+
initialValue = field._initialValue;
97+
}
98+
});
99+
this.fieldLocks[name] = 1;
100+
this.state.validatingFields[name] = false; // this.formError[name] = null;
101+
102+
this.cleanError(name);
103+
this.setValue(name, initialValue, cb);
104+
};
105+
70106
_proto.getFormValue = function getFormValue() {
71107
return this.state.formValue;
72108
};
@@ -344,13 +380,14 @@ function (_React$Component) {
344380
var _this$state = this.state,
345381
formError = _this$state.formError,
346382
validatingFields = _this$state.validatingFields;
347-
var lockId = ++this.fieldLockId; //是否异步探测
383+
this.fieldLocks[name] = this.fieldLocks[name] || 1;
384+
var lockId = ++this.fieldLocks[name]; //是否异步探测
348385

349386
var asyncTimer = setTimeout(function () {
350387
var _extends4;
351388

352389
asyncTimer = null;
353-
if (lockId !== _this2.fieldLockId) return;
390+
if (lockId !== _this2.fieldLocks[name]) return;
354391

355392
_this2.setState({
356393
validatingFields: _extends({}, validatingFields, (_extends4 = {}, _extends4[name] = true, _extends4))
@@ -365,7 +402,7 @@ function (_React$Component) {
365402
} // isAsync = false;
366403

367404

368-
if (lockId !== _this2.fieldLockId) {
405+
if (lockId !== _this2.fieldLocks[name]) {
369406
callback(errors, value, true
370407
/* abort state */
371408
);
@@ -389,7 +426,7 @@ function (_React$Component) {
389426
var _this$state2 = this.state,
390427
formValue = _this$state2.formValue,
391428
formError = _this$state2.formError;
392-
this.fieldLockId++; //validate优先级高于validateField
429+
this.fieldLocks = {}; //validate优先级高于validateField
393430

394431
var lockId = ++this.formLockId;
395432
var fields = this.fields;

‎esm/FormItem.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,12 @@ function (_React$Component) {
106106
return "validateDelay" in props ? props.validateDelay : validateDelay;
107107
};
108108

109+
_proto.reset = function reset(cb) {
110+
var form = this.getForm();
111+
var name = this.props.name;
112+
form.resetField(name, cb);
113+
};
114+
109115
_proto.hasError = function hasError() {
110116
var form = this.getForm();
111117
var name = this.props.name;

‎esm/index.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,8 @@ declare namespace ReactWidgetForm {
113113
value: any,
114114
callback: (formValue: {}) => void
115115
): void;
116+
reset(cb: () => void): void;
117+
resetField(cb: () => void): void;
116118
hasError(name: string): boolean;
117119
getError(name: string): any;
118120
cleanError(name: string): void;
@@ -150,6 +152,7 @@ declare namespace ReactWidgetForm {
150152
export class FormItem extends React.Component<FormItemProps, {}> {
151153
getDOM(): any;
152154
getForm(): Form;
155+
reset(cb: () => void): void;
153156
getValue(): any;
154157
setValue(value: any, callback: (formValue: {}) => void): void;
155158
hasError(): boolean;

‎examples/demos/demo1.js

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function FormItemField({
2727
export default class DEMO extends Component {
2828
state = {
2929
formValue: {
30-
username: "",
30+
username: "默认",
3131
password: "",
3232
password2: "",
3333
email: ""
@@ -36,16 +36,22 @@ export default class DEMO extends Component {
3636

3737
reset = e => {
3838
e.preventDefault();
39-
this.setState({
40-
formValue: {
41-
username: "",
42-
password: "",
43-
password2: "",
44-
email: ""
45-
}
46-
});
39+
if (this.form) {
40+
this.form.reset(() => {
41+
console.log(23);
42+
// this.forceUpdate();
43+
});
44+
}
45+
// this.setState({
46+
// formValue: {
47+
// username: "",
48+
// password: "",
49+
// password2: "",
50+
// email: ""
51+
// }
52+
// });
4753

48-
this.form.cleanErrors();
54+
// this.form.cleanErrors();
4955
};
5056

5157
onSubmit = e => {
@@ -59,6 +65,7 @@ export default class DEMO extends Component {
5965
};
6066

6167
renderFieldExtra = component => {
68+
console.log("update");
6269
return (
6370
<div
6471
style={{
@@ -82,9 +89,9 @@ export default class DEMO extends Component {
8289
// validateTrigger={["change", "blur"]}
8390
getDefaultFieldValue={() => ""}
8491
requiredMessage="不能为空"
85-
ref={form => (this.form = form)}
92+
ref={form => ((this.form = form), (window._form = form))}
8693
labelAlign="right"
87-
// formValue={formValue}
94+
formValue={formValue}
8895
onChange={formValue => this.setState({ formValue })}
8996
onSubmit={this.onSubmit}
9097
renderControlExtra={this.renderFieldExtra}

0 commit comments

Comments
 (0)