Question

如何在dojo 2中实现输入的2路数据绑定？

handleChange = (e) => {
  this.setState({ textValue: e.target.value });}
<Input name='title' defaultValue={this.state.textValue} placeholder='title...' onChange={this.handleChange} />

我知道这就是我们在React中的表现，但不知道如何在dojo 2中实现。

Answer 1

实际上React仅支持单向绑定，您的示例很好地说明了它。您需要更新状态，以重新渲染反应组件。据我所知，从dojo2文档和教程中，几乎有相同的方法。看看here

Dojo 2是围绕单向，自上而下的属性传播构建的，其中父窗口小部件将属性传递给子窗口。实际上，子窗口小部件没有直接引用父窗口小部件！当属性更改时，将重新呈现窗口小部件（使用高效的虚拟DOM）以反映更新的状态。

它可能看起来像这样：

private _addWorker() {
        this._workerData = this._workerData.concat(this._newWorker);
        this._newWorker = {};
        this.invalidate();
    }

您更改数据并调用invalidate（）以重新呈现窗口小部件。

Answer 2

这是在Dojo 2中实现双向数据绑定的解决方案。

InputWidget： -

interface IInputProps {
   value: string;
   onChange(event: Event): void;
}
export class InputWidget extends WidgetBase<IInputProps> {
  private _onChange (event: Event) {
    event.stopPropagation();
    this.properties.onChange && this.properties.onChange((event.target as HTMLInputElement).value);
  }

  protected render(): DNode {
    const { value } = this.properties;
    return v('input', { 
        key: "input",
        type: "text",
        value
        onchange: this._onChange
    });
  }
}

InputWrapper小部件： -

export class InputWrapper extends WidgetBase<IWrapperProps> {
  private inputValue: string = ''; 
  protected inputValueChanges(value: string) {
    this.inputValue = value;
    this.invalidate();
  }

  protected render(): DNode {
    <div>
        {w(InputWidget, {onchange: this.inputValueChanges, value: this.inputValue })}
        <span>Input Value:- {this.inputValue}</span>
    </div>

  }
}

这是在Dojo 2中实现双向数据绑定的解决方案。

希望这会有所帮助！：（

Dojo 2如何实现输入的双向绑定？

2 个答案: