如何在Dojo 2中实现输入框的双向数据绑定？

Great question! Since you already know how to handle two-way binding in React with onChange and setState, let's walk through how to achieve the same thing in Dojo 2—there are a couple of straightforward approaches depending on your use case.

First, let's recap your React implementation for reference:

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

Now, here's how to do it in Dojo 2:

1. Basic Approach with Observable State #

Dojo 2 uses observable state to automatically trigger re-renders when your data changes, so you don't need to manually call a setState equivalent like in React. You'll use the @observable decorator from @dojo/framework/core/state along with Dojo's built-in Input widget.

Here's a functional widget example:

import { create, tsx } from '@dojo/framework/core/vdom';
import { Input } from '@dojo/framework/widgets/input';
import { observable } from '@dojo/framework/core/state';

const factory = create({}).properties();

export default factory(function TitleInput() {
  // Create observable state to track the input value
  const state = observable({
    textValue: ''
  });

  return (
    <Input
      value={state.textValue}
      placeholder="title..."
      onChange={(value) => {
        // Update the observable state directly—no manual re-render trigger needed!
        state.textValue = value;
      }}
    />
  );
});

If you prefer class-based widgets, it works similarly:

import { WidgetBase } from '@dojo/framework/core/WidgetBase';
import { tsx } from '@dojo/framework/core/vdom';
import { Input } from '@dojo/framework/widgets/input';
import { observable } from '@dojo/framework/core/state';

@observable
class TitleInput extends WidgetBase {
  textValue = '';

  render() {
    return (
      <Input
        value={this.textValue}
        placeholder="title..."
        onChange={(value) => {
          this.textValue = value;
        }}
      />
    );
  }
}

export default TitleInput;

Key differences from React:

• Dojo's Input widget passes the raw input value directly to the onChange callback, so you don't need to extract it from e.target.value.
• The @observable decorator handles re-rendering automatically when the state updates—no need for setState.

2. Store-Based Approach for Complex Apps #

If you're building a larger app with shared state, Dojo 2's store system is the way to go. It centralizes your state and handles updates cleanly:

import { create, tsx } from '@dojo/framework/core/vdom';
import { Input } from '@dojo/framework/widgets/input';
import { Store } from '@dojo/framework/store/Store';
import { update } from '@dojo/framework/store/operations';

// Define your app's state shape
interface AppState {
  textValue: string;
}

// Initialize the store with default state
const store = new Store<AppState>({ state: { textValue: '' } });
const { path } = store;

const factory = create({ store }).properties();

export default factory(function TitleInput({ middleware: { store } }) {
  // Get the current value from the store
  const textValue = store.get(path('textValue'));

  return (
    <Input
      value={textValue}
      placeholder="title..."
      onChange={(value) => {
        // Dispatch an update to the store
        store.dispatch(update(path('textValue'), value));
      }}
    />
  );
});

This approach is great for state that needs to be accessed across multiple widgets, as it keeps your data synchronized everywhere.

In short, Dojo 2 simplifies two-way binding by leveraging observable state or a centralized store, eliminating the manual state update and re-render triggers you need in React.

内容的提问来源于stack exchange，提问作者Sagar Kharche