淘宝网那样的网站模板,wordpress 密码明文,wordpress页面音乐播放器,直播系统平台solidjs 处理复杂类型的响应式
在 solidjs 里响应式一般直接用 createSignal 就可以#xff0c;但 createSignal 一般用于基础数据类型。
虽然复杂类型也是可以使用#xff0c;但基于起细粒度响应性的特性。 一般复杂的数据使用 createSignal 就不是那么友好了。
所以 cre…solidjs 处理复杂类型的响应式
在 solidjs 里响应式一般直接用 createSignal 就可以但 createSignal 一般用于基础数据类型。
虽然复杂类型也是可以使用但基于起细粒度响应性的特性。 一般复杂的数据使用 createSignal 就不是那么友好了。
所以 createStore 就来了。
例子如下用 createSignal 的话就要设置整个 formData 以覆盖原值。
const [formData, setFormData] createSignalformData({columnID: 0,pageSize: 20,keyword: ,
});// 修改keyword的值
setFormData({...keyword: xxx,
})//或者
setFormData(prev ({ ...prev, keyword: xxx }));
明显的当 createSignal 用于对象时每次更新都需要创建新对象。
使用 createStore 代替。
const [formData, setFormData] createStoreformData({columnID: 0,pageSize: 20,keyword: ,
});setFormData(keyword, newValue);
那么增加更复杂的对象
const [formData, setFormData] createStoreformData({columnID: 0,pageSize: 20,keyword: ,details:{address:}
});// 修改address使用路径setFormData(details,address, addressValue);
是不是一下在就清晰明了。接下来就是实战了。
我有一个表单formData 类型还是上面的。 // 可以直接设置
inputtypetextvalue{formData.details.address}onInput{(e) setFormData(details,address,e.target.value);}
/
添加自定义方法基础款
const updateField (path: any) (e: any) {setFormData(path, e.target.value);
};inputtypetextvalue{formData.keyword}onInput{updateField(keyword)}
/
添加自定义方法进阶款适用有套嵌
const updateField (path: any) (e: any) {setFormData(...path, e.target.value);
};inputtypetextvalue{formData.details.address}onInput{updateField([details,address])}
/
inputtypetextvalue{formData.keyword}onInput{updateField([keyword])}
/
若数组(严格来说这里是元组)不好看。改用 string 也是可以的。
const updateField (path: string) (e: any) {const keys field.split(.);setFormData(...keys, e.target.value);
};inputtypetextvalue{formData.details.address}onInput{updateField(details.address)}
/
// 是不是一下子就美观多了。若在 TS 项目中使用会报错…keys 这里会报扩展参数必须元组类型或这传递参数 rest比较蛋疼不影响使用。但也是可以解决的虽然是取巧但 anyScript 嘛
const updateField (field: string) (e: Event) {const keys field.split(.);(setFormData as any)(...keys, (e.target as HTMLInputElement).value);
};
