使用React和Mobx的handleChange [英] handleChange with React and Mobx

问题描述

在我的Web应用程序的第2步中，在MobX存储中分配了一个可观察的字符串值.然后在触发第3步"组件渲染时将其渲染为textarea值.

On Step 2 of my web app, an observable string value is assigned inside a MobX store. It is then rendered as a textarea value when the Step 3 component render is triggered.

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

I have been following the React docs at https://reactjs.org/docs/forms.html to handle manual changes to the textarea value but have not been successful.

第3步功能组件中的我的文本区域(从语义UI React导入):

My textarea in the Step 3 functional component (imported from Semantic UI React):

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

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

A change handler in the same component:

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

mobx动作来改变可观察值以控制状态:

A mobx action to mutate the observable value controlling the state:

set_final_text_message(input_message) {
    this.final_text_message = input_message
}

在我的控制台上，似乎没有触发本地更改处理程序.我正在退格并按下文本区域中的字符，但是步骤2中的文本被锁定在那里，并且保持不变.

From my console it does not appear that the local change handler is firing. I am backspacing and pressing characters in the textarea but the text from step 2 is locked there, unchanging.

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

Can anyone spot my current error? Thanks

推荐答案

您没有调用内联箭头功能内的update_final_textarea功能.您可以只将函数本身提供给onChange道具.

You are not invoking the update_final_textarea function inside your inline arrow function. You could just give the function itself to the onChange prop instead.

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

如果愿意，还可以将所有逻辑内联.

You could also put all the logic inline if you prefer.

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！