# 双向绑定 | 使用 Tango 构建你的低代码生产力工具
TangoBoot 支持快捷实现组件与视图双向绑定。

Skip to main content
🏗 当前版本为 alpha 版本，相关文档正在编写之中，敬请期待！

# 双向绑定

TangoBoot 支持快捷实现组件与视图双向绑定。

## 借助 `withModel` 实现双向绑定​

`withModel` 是 TangoBoot 内置的模型绑定 HOC，支持将组件的内部状态同步到某个 store 定义的状态中。基本的用法如下：

    class Input extends React.Component {
      foo() {}

      render() {
        return <input {...this.props} />;
      }
    }

    const ModelInput = withModel({
      // 设置从组件同步到 store 中的状态值
      getValueFromEvent(e: any) {
        return e.target.value;
      },
    })(Input);

现在 `ModelInput` 获取了双向绑定的能力，其 `value` 变化后的值将会通过 `onChange` 事件同步给绑定的模型变量

    const Store = defineStore(
      {
        name: 'alice',
      },
      'user'
    );

    const ModelApp = defineView((props) => {
      return (
        <div>
          <ModelInput model="user.name" />
        </div>
      );
    });

## 配置选项​

`withModel` 的定义如下：

    withModel(options)(Component);

其中 options 的配置如下：

属性名 | 类型 | 默认值 | 说明
--- | --- | --- | ---
name | string |  | 组件的 displayName
valuePropName | string | "value" | 组件的受控值
trigger | string | "onChange" | 组件值变化时的回调函数
getValueFromEvent | `(...args) => any` |  | 从回调函数参数中的取值方法

借助 `withModel` 增强后，Component 组件将会获得如下属性：

属性名 | 类型 | 默认值 | 说明
--- | --- | --- | ---
model | string |  | 绑定的模型变量的变量路径