时间戳

首页 > 解决方案 > 如何将多个 mobx 观察者状态作为参数传递给函数

javascript - 如何将多个 mobx 观察者状态作为参数传递给函数

问题描述

我有这些状态：

  @observable questionString: string = '';
  @observable questionLengthRemaining: number = 25;
  @observable descriptionString: string = '';
  @observable descriptionLengthRemaining: number = 500;

我有这个功能：

onInputChamge = (state: any, stateLengthRemaining: any, maxLength: any, text: string) => {
    state = text;
    stateLengthRemaining = maxLength - text.length;
  }

这是我的组件：

<TextInput
            multiline={true}
            maxLength={questionMaxLength}
            placeholder='Type your question here'
            style={styles.questionInput}
            onChangeText={(question) => this.onInputChamge(this.questionString, this.questionLengthRemaining, questionMaxLength, question)}
          />

我有多个 textInputs，它们只需要做同样的事情并接受 onInputChange 函数，但只有不同的状态和长度。出于某种原因，将状态作为函数中的参数传递是行不通的，但是当我为它们中的每一个创建不同的函数时，例如：

onQuestionChange = (text: string) => {
    this.questionString = text;
    this.questionLengthRemaining = maxQuestionLength - text.length;
  }

有用。

为每个输入创建相同的函数是非常没有意义的，因为这是函数应该限制的。顺便说一句，我正在使用 typescript 和 mobx。有什么办法可以做到这一点？（如果我控制台记录剩余的长度，它会打印出正确的数字和字符串，所以我知道发生了什么）

标签： javascripttypescriptfunctionreact-nativemobx

解决方案

如果你所有的都observable在同一个类组件中，那么你可以做这样的事情：

onInputChange = (key, value, stateLengthRemaining, maxLength, text) => {
    this[key] = value
}

然后像这样传递属性的名称question => this.onInputChange('questionString', question, ... )

您也不需要手动分配descriptionLengthRemaining，因为您可以将其设为计算属性https://mobx.js.org/refguide/computed-decorator.html

@computed get questionLengthRemaining() {
   return 25 - this.questionString.length
};

推荐阅读