使用 React 和 Mobx 处理变化

Question

在我的网络应用程序的第 2 步中，在 MobX 存储中分配了一个可观察的字符串值。然后在触发第 3 步组件渲染时将其渲染为文本区域值。

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

我在第 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 步中的文本被锁定在那里，没有改变。

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

Answer 1

您没有在内联箭头函数中调用 update_final_textarea 函数。您可以将函数本身提供给 onChange 道具。

<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)}
/>

使用 React 和 Mobx 处理变化

handleChange with React and Mobx

reactjs

mobx

mobx-react