输入在Reactjs的Mobx Store中不起作用

Question

起初，我在下面制作了“商店”。 我希望实时将输入置于登录状态。

import { observable, action } from 'mobx'

export default class SingUpIn {
  @observable initialState = {
    register: {
      email: '',
      username: '',
      password: '',
      passwordConfirm: ''
    },
    login: {
      email: '',
      password: ''
    }
  }

  @action changeLogin = (name, value) => {
    this.initialState.login.name = value
  }
}

我把它注入一个组件。 但是当我在Input上写一些东西时，任何输入都没有被显示出来 你能推荐一些解决方案吗？

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { observer, inject } from 'mobx-react'

@inject('SignUpIn')
@observer
class SignUp extends Component {
  handleChange = e => {
    const { SignUpIn } = this.props
    SignUpIn.changeLogin(e.target.name, e.target.value)
  }

  render () {
    const { SignUpIn } = this.props

    return (
      <div>
        <input
          id="email"
          name="email"
          placeholder="email"
          value={SignUpIn.initialState.login.email}
          onChange={this.handleChange}
        />
      </div>
    )
  }
}

export default SignUp

Answer 1

试着用这个

@action changeLogin = (name, value) => {
    this.initialState.login[name]= value
  }

Answer 2

只是为了提醒kkangil解决方案的原因： -

当您使用（。）表示法访问对象属性时，它将查找属性名称的字符串值。

this.initialState.login.name：这只会在对象中查找name的字符串值。

在使用括号表示法[]的情况下，属性标识符必须是字符串或引用该字符串的变量。

因此，您可以使用name作为引用另一个字符串的变量。

例如

var obj = {
    charmandar: 'fire',
    squirtle: 'water'
}

var charmandar = 'squirtle'

的console.log（obj.charmandar）; // 火

的console.log（OBJ [charmandar]）; // 水