You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- slot mode refers to the way a subfield of a field is rendered in a component by default subfields are rendered in the component as child elements of the component when the `slotMode` of a field is `true` the subfields representing the field are passed to the component as the component's `props` allowing the component to decide how to render the subfields themselves.
106
+
-`slotName`: the name of the slot used to identify the slot in the form default is field `id`.
107
+
-`slotMode`: slot mode used to control the rendering method of slots.
108
+
109
+
```ts
110
+
const firstName =defineField({
111
+
id: "firstName",
112
+
component: Input,
113
+
props: {
114
+
label: "firstName",
115
+
prefix: "👤",
116
+
required: true,
117
+
},
118
+
});
119
+
120
+
const lastName =defineField({
121
+
id: "lastName",
122
+
component: Input,
123
+
props: {
124
+
label: "lastName",
125
+
prefix: "👤",
126
+
required: true,
127
+
},
128
+
});
129
+
130
+
const usernameLayout =defineVoidField({
131
+
id: "usernameLayout",
132
+
component: Flex,
133
+
slotMode: true,
134
+
hidden: (handler) => {
135
+
returnhandler.queryState(age)?.value>18;
136
+
},
137
+
properties: [firstName, lastName],
138
+
props: {
139
+
vertical: false,
140
+
}
141
+
});
142
+
143
+
function Flex(props: {
144
+
firstName?:RectNode;
145
+
lastName?:RectNode;
146
+
vertical?:boolean;
147
+
}) {
148
+
return (
149
+
<div
150
+
style={{
151
+
display: "flex",
152
+
flexDirection: props.vertical?"column":"row",
153
+
alignItems: "center",
154
+
gap: 8,
155
+
}}
156
+
>
157
+
{props.firstName}
158
+
{props.lastName}
159
+
</div>
160
+
);
161
+
}
162
+
```
163
+
103
164
## hidden
104
165
105
166
-`hidden` is a `Decision` object that indicates whether the field is hidden. `hidden` can also be a function. The function's parameters are a `handler` with read-only operations, and the return value is a boolean. The default value is false.
Copy file name to clipboardExpand all lines: content/docs/core/relation/defineReaction.mdx
+34-34Lines changed: 34 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,11 @@
1
1
---
2
-
title: Basic Reactions
3
-
description: Define field dependencies and implement reactive data flow
2
+
title: Basic Reaction
3
+
description: Define field reaction relationships to implement reactive data flow
4
4
---
5
5
6
6
## Overview
7
7
8
-
`defineReaction` is used to define reactive relationships between fields. When dependency fields change, it automatically triggers update logic for target fields.
8
+
`defineReaction` is used to define reaction relationships between fields. When dependency fields change, it automatically triggers the update logic of target fields.
9
9
10
10
## Basic Usage
11
11
@@ -14,7 +14,7 @@ import { defineReaction } from '@signals-form/core'
14
14
15
15
const reaction =defineReaction({
16
16
field: targetField, // Target field
17
-
dependencies: [sourceField], //Array of dependency fields
17
+
dependencies: [sourceField], //Dependency field array
> ⚠️ **Warning**: Minimize many-to-many scenarios. Prefer many-to-one patterns for better maintainability and debugging.
146
+
> ⚠️ **Note**: Try to minimize many-to-many usage scenarios. Prefer many-to-one approaches for reaction logic as they are easier to maintain and debug.
1.**Circular Dependencies**: The system supports circular dependencies, but ensure you don't modify the `value` property in update functions to avoid infinite loops
228
-
2.**Performance Considerations**: Default dirty value checking helps optimize performance. Avoid setting `dirtyIgnore: true` unless necessary (e.g., updates based on timestamps or other dynamic values)
229
-
3.**Async Handling**: For async updates, always handle AbortSignal to prevent memory leaks and race conditions
1.**Circular Dependencies**: The system supports circular dependencies, but ensure you don't modify the `value` property in update functions, as this will cause infinite loops
228
+
2.**Performance Considerations**: Default dirty value checking helps with performance optimization. Unless necessary (e.g., updates based on timestamps or dynamic values), avoid setting `dirtyIgnore: false`
229
+
3.**Async Handling**: For async updates, always handle AbortSignal to avoid memory leaks and race conditions
* @paramdepValues - Array of dependency field values
249
-
* @paramsignal - Cancellation signal
247
+
* @paramhandler - Field operation handle
248
+
* @paramdepValues - Value array of dependency fields
249
+
* @paramsignal - Abort signal
250
250
*/
251
251
update: (
252
252
handler:FieldHandler<T, P>,
@@ -258,10 +258,10 @@ export interface Reaction<
258
258
once?:boolean;
259
259
/** Whether to trigger immediately */
260
260
immediate?:boolean;
261
-
/** Whether to ignore dirty value checks, skip duplicate value updates, defaults to false*/
261
+
/** Whether to ignore dirty value checks, skip multiple execution value updates, default is true*/
262
262
dirtyIgnore?:boolean;
263
263
};
264
264
}
265
265
```
266
266
267
-
Basic reactions are the fundamental reactive pattern, suitable for most scenarios. For more advanced control capabilities, consider using
267
+
Basic reactions are the most fundamental reaction type, suitable for most scenarios. For more advanced control capabilities, consider using`defineRelation` controlled reactions.
0 commit comments