受控文本输入的生命周期答案

【问题标题】：Lifecycle for controlled textinputs受控文本输入的生命周期
【发布时间】：2018-01-13 23:20:31
【问题描述】：

我想知道 mobx 循环是否仅在 HOClass 操作中反应组件之外的商店中的可观察更改时触发因为 mobx 商店有一个顶级 Provider，它触发了 React 组件的重新渲染。

  ReactDOM.render(<Provider { ...stores } >
              <Routes />
              </Provider>,

但这是否意味着我不能直接添加可观察对象来反应组件？如果是这样，那就有点不幸了。

@observer
export default class Profile extends React.Component {
  @observable name;
  componentWillMount() {
    this.name = this.props.name;
  }
  txtChange = (e) => {
    this.name = e.target.value;
  }
  render() {
    return (
      <div>
      <input type="text" onChange={this.txtChange} value={this.name}/>
      </div>
    )
  }

由于某种原因，我的应用程序无法更新可观察名称。在一些使用 mobx 的应用程序上，但我可以。如果 observable 附加到 React.Component 本身，为什么我无法更改 this 的值并触发反应状态更新？

在这里，我以受控的可观察方式更新了表单，但是当 Provider 在此设置下在我当前的项目上使用我的路由器时，不会触发反应重新渲染。

https://codepen.io/cheapsteak/pen/wzdvzQ

帮助任何人？

【问题讨论】：

标签： forms reactjs mobx mobx-react

【解决方案1】：

有一个错字：该函数被称为txtChange，但组件却引用了this.txthange。无论哪种方式，这是一个固定的工作示例：https://codepen.io/justnobody/pen/RxJmmY?editors=1010

【讨论】：

在codepen中它可以工作，在我的本地项目中但是textinput没有更新。我会在几分钟内提供一个 github 仓库。