如何将文本框绑定到 React 状态中的复杂对象？

Question

背景

我正在使用他们基于 React 的入门工具包和 TypeScript 构建一个办公插件。我提到这个是因为据我所知我无法获得很好的调试支持，所以我无法看到 React 在我当前情况下提供的错误消息。

我在尝试什么

（下面进行了简化。如果您愿意，我可以更具体；让我知道。）

我的 AppState 有一个接口，还有一个具有某些属性的复杂对象：

export interface AppState {
  eventInput: EventInput;
}

export class BookendEventInput {
  public minutesAdjacent: number = 30;
  public subject: string = "";
  public enabled: boolean = false;
  public eventId: string = "";
}

我有一个工作场景，它是一个复选框：

<Checkbox id="enableBookendBefore" checked={this.state.eventInput.enabled} onChange={this.eventInputCheckboxChanged}></Checkbox>

即通过更改函数更新状态：

eventInputCheckboxChanged = () => {
    this.setState((state: AppState) => {
      var newValue = !this.state.eventInput.enabled;
      var input = state.eventInput;

      input.enabled = newValue;

      state.eventInput = input;
    })
  }

但这不适用于另一种情况。

问题

我现在正尝试对文本框做类似的事情。我有一个输入：

<input type="text" id="subject" disabled={!this.state.eventInput.enabled} value={this.state.eventInput.subject} onChange={this.subjectChanged} />

以及变化函数：

  subjectChanged = (e) => {
    var newSubject = e.target.value;

    this.setState((state: AppState)=> {
      var input = state.eventInput;
      input.subject = newSubject;

      state.eventInput = input;
    })

预期行为：我希望看到主题文本框和状态更新，就好像它们是双向绑定的一样。

实际行为：整个屏幕变成 blank/white，表明我收到了我认为的 React 级错误（因为我不能执行 F12 和无法看到调试输出，因为它位于 Outlook 内的任务窗格中。）

问题

如何使用 React 正确绑定文本框，该文本框绑定到状态内对象中的属性？是否可以这样做，或者我是否违反了 React 原则？

Answer 1

在这种情况下，您正在使用 setState 的回调来尝试修改状态。这要么没有触发，要么导致无限循环，我不确定是哪一个！

无论哪种方式，要正确修改您需要的状态：

subjectChanged = (e) => {
    var newSubject = e.target.value;
    var input = state.eventInput;

    input.subject = newSubject;

    this.setState({eventInput: input});
});

这将实现您想要的。

如何将文本框绑定到 React 状态中的复杂对象？

How can I bind a text box to a complex object within state in React?

javascript

office-addins

typescript

reactjs

office-js

背景

我在尝试什么

问题

问题