Skip to content

gmono/react-binding-value

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

example

react data-binding implementation,there is a example in Taro framework:

import { binding, pack} from "react-binding-value"
function Test() {
    let [state, setState] = useState("test")
    let bindData = binding(useState("hello"))
    let MyComp = pack(Input).bind("value", "onInput", (v) => {
        return v.detail.value;
    }).bind("password","onInput",(v)=>{
        alert("change")
        return v==null;
    }).build();

    return (
        <MyComp  bind-password={binding(useState(false))} bind-value={binding([state,setState])} />
    )
}

说明

React的完整版的双向binding实现,自动实现属性增减,全面支持typescript提示与报错,强类型支持,支持自定义组件的自定义绑定,语法简洁与Vue和Blazor类似,支持多重事件(即用作双向binding的事件还可以作自定义binding,互不影响),支持绑定多个属性到同一个事件上,支持提取函数和提取函数的复用(从事件参数中提取值),满足你对双向绑定的所有幻想

计划

未来还将支持绑定到其他组件的事件,进行交叉绑定,

About

react的完整版的双向绑定实现,有完整的typescript支持,全面的类型提示和报错,直截了当的包装方法

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published