Наблюдаемые свойства Mobx, установленные в componentDidMount, не отображаются в textarea - PullRequest
0 голосов
/ 06 апреля 2019

Я только что слышал о Mobx как о библиотеке управления состоянием несколько часов назад.Я решил попробовать, написав следующий код:

import React from 'react'
import { render } from 'react-dom'
import {observable} from 'mobx';
import {observer} from 'mobx-react';

var appState = observable({athlete_name:"Cy Young"});
@observer
export default class App extends React.Component
{
  componentDidMount()
  {
    appState["athlete_name"] = "Babe Ruth"; // this variable/property will be loaded via a REST API http request
  }
  render() {

    console.log(appState["athlete_name"]);
    return (
    <form>
      <h1>{appState["athlete_name"]}</h1>
      <textarea>{appState["athlete_name"]}</textarea>
      <textarea defaultValue={appState["athlete_name"]} />
      <textarea defaultValue="Babe Ruth" />
    </form>
    )
  }
}

render(<App />, document.getElementById('app'))

Но по некоторым причинам первые два textarea печатают Cy Young.Последние textarea, h1 и console.log(appState["athlete_name"]) выводят значение Babe Ruth, как и ожидалось.Почему Cy Young не заменяется Babe Ruth в двух текстовых областях?Что я сделал не так?

1 Ответ

2 голосов
/ 06 апреля 2019

Попробуйте:

<textarea value={appState["athlete_name"]}></textarea>

Элементы формы HTML работают немного иначе, чем другие элементы DOM в React.Смотри это

...