使用 React 和 Mobx 处理变化

IT技术 reactjs mobx mobx-react
2022-08-03 02:14:47

在我的网络应用程序的第 2 步中,在 MobX 商店内分配了一个可观察的字符串值。然后在触发 Step 3 组件渲染时将其渲染为 textarea 值。

我一直在关注https://reactjs.org/docs/forms.html上的 React 文档来处理对 textarea 值的手动更改,但没有成功。

我在 Step 3 功能组件中的文本区域(从 Semantic UI React 导入):

<TextArea autoHeight
          value={ ui_store.final_text_message }
          className={ textarea_style }
          onChange={ () => update_final_textarea }
/>

同一组件中的更改处理程序:

const update_final_textarea = (text_input) => {
    ui_store.set_final_text_message(text_input.target.value);
    console.log(text_input.target.value);
};

用于改变控制状态的可观察值的 mobx 操作:

set_final_text_message(input_message) {
    this.final_text_message = input_message
}

从我的控制台看来,本地更改处理程序并未触发。我在文本区域中退格并按下字符,但步骤 2 中的文本被锁定在那里,不变。

谁能发现我当前的错误?谢谢

1个回答

您没有update_final_textarea在内联箭头函数中调用该函数。您可以将函数本身赋予onChangeprops。

<TextArea
  autoHeight
  value={ui_store.final_text_message}
  className={textarea_style}
  onChange={update_final_textarea}
/>

如果您愿意,也可以将所有逻辑内联。

<TextArea
  autoHeight
  value={ui_store.final_text_message}
  className={textarea_style}
  onChange={event => ui_store.set_final_text_message(event.target.value)}
/>