有没有办法在 ReactJS 中获取 mobx 可观察变量地址

Question

我正在尝试通过该组件中函数内部的道具更改赋予组件的变量值。 我无法更改可观察对象的值（即使通过参数传递变量），所以我想知道是否可以检索可观察地址以直接修改它。

@observer
class Exemple extends React.Component {
  @observable Nom

  @action onChangeNom = newValue => {
    this.Nom = newValue //I want to have something similar to this function inside the component but it would take the value to update and the newValue as parameters
  }
  render() {
    return (
      <FormComponent //this is where I call my component
        ContainerStyle={{
          display: 'flex',
          flexDirection: 'row',
          flexWrap: 'wrap',
        }}
        ObjArray={[
          {
            InputDivStyle: { width: '49%', marginRight: '2%' },
            FieldType: 'textInput',
            FieldStyle: { borderColor: this.missingLastName ? 'red' : COLOR_NOT_BLACK },
            OnChange: this.onChangeNom,
            Placeholders: 'Ex. Durand',
            Value: this.Nom, //this is the value I want to change inside the component
            InputTitle: 'Nom',
          },
        ]}
      />
    )
  }
}

@observer
class FormComponent extends React.Component<props> {
  render() {
    const { ObjArray, ContainerStyle } = this.props
    return (
      <div style={ContainerStyle}>
        {ObjArray.map((e, index: number) => {
          const { Disabled, FieldStyle, InputDivStyle, FieldType, Placeholders, OnChange, Value, InputTitle } = e
          return (
            <>
              <div style={InputDivStyle ?? {}} key={index + 'Input'}>
                {InputTitle && (
                  <>
                    <Label medium>{InputTitle}</Label>
                  </>
                )}
                <GenericInput
                  disabled={Disabled ?? false}
                  placeholder={Placeholders ?? ''}
                  style={FieldStyle ?? {}}
                  type={FieldType ?? ''}
                  value={Value ?? ''}
                  onChange={evt => {
                    OnChange(evt.target.value)
                  }}
                />
              </div>
            </>
          )
        })}
      </div>
    )
  }
}
export default FormComponent

我担心的是我希望能够更改组件内部的值，而不必为每个值创建一个函数（例如，如果 ObjArray 中有多个对象。（我已经尝试将值传递为组件内部的参数，但它不会在外部更新它，这就是为什么我希望能够直接在存储它的内存地址处更改值（就像你可以在 C 中使用指针一样）。

Answer 1

我希望能够直接在存储它的内存地址更改值

这在 Javascript 中是不可能的，你不能“通过引用”（原始含义），所以你不能像那样改变值。

最简单的方法是拥有这样的功能：

  @action onChange = (key, newValue) => {
    this[key] = newValue 
  }

你用一个键将它传递给组件，然后像这样调用：

  onChange={evt => {
    // Or you can use InputTitle instead of key
    OnChange(key, evt.target.value)
  }}

这样您就不需要为每个值创建大量函数