Question

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

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

第3步功能组件中的我的文本区域（从语义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

1 个答案: