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

Question

起初，我 'Store' 如下所示。
我想实时将输入置于登录状态。

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
  }
}

然后我将它注入到一个组件中。
但是当我在输入上写东西时，任何输入都没有出现
你能推荐一些解决方案吗？

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 的字符串值。

使用方括号 [] 时，属性标识符必须是字符串或变量引用字符串。

因此，您可以使用名称，它是一个引用另一个字符串的变量。

例如

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

var charmandar = 'squirtle'

console.log(obj.charmandar); // fire

console.log(obj[charmandar]); // water

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

Input doesn't work in Mobx Store at Reactjs

reactjs

mobx