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

Question

我正在尝试通过此组件中函数内的 props 更改赋予组件的变量值。我无法让可观察对象的值发生变化（即使通过参数传递变量）所以我想知道我是否可以检索可观察对象地址以通过这种方式直接修改它。

@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

I want to be able to change the value directly at the memory address where it is stored

在 Javascript 中是不可能的，你不能“传递引用”（原意），所以你不能那样改变值。

最简单的方法是使用这样的函数：

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

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

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

这样你就不需要为每个值创建很多函数

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

Is there a way to get a mobx observable variable address in ReactJS

javascript

reactjs

mobx

mobx-react