我想通过计算每个input标签中的三个input标签的输入内容来相互反映

I want to each other reflected by calculating the input contents of the three input tags in each

目前的情况,只体现在两个计算其中一个输入标签的输入内容

・这只是一个例子

・输入标签的输入内容互反就好了

<div id="target"></div>
<script src="mithril.min.js"></script>
<script>
var App = {
  controller: function() {
    return {
      temp: m.prop(10)
    }
  },
  view: function(ctrl) {
    return m("div", [ 
      m("input", {onchange: m.withAttr("value", ctrl.temp), value: ctrl.temp()}),
      m.component(App2, {value: ctrl.temp()}),
    ]);
  }
};
var App2 = {
  controller: function() {
      return {
          m1: function ( param ) {
            return {'a': parseInt(param)+1, 'b': parseInt(param)+2, 'c': parseInt(param)+3};
          },

          m2: function ( param ) {
            m2Obj = this.m1(param);
            return {'d': parseInt(m2Obj['a'])+4, 'e': parseInt(m2Obj['b'])+5, 'f': parseInt(m2Obj['c'])+6};
          }
      }
  },
  view: function(ctrl, args) {
    return m('div',
      m("input", {onchange: m.withAttr("value", ctrl.m1(args.value)), value: ctrl.m1(args.value)['a']+","+ctrl.m1(args.value)['b']+","+ctrl.m1(args.value)['c']}),
      m("input", {onchange: m.withAttr("value", ctrl.m2), value: ctrl.m2(args.value)['d']+","+ctrl.m2(args.value)['e']+","+ctrl.m2(args.value)['f']})
    );
  }
};
m.mount(target, App)
</script>

App2 中的输入无法正常交互,因为 App2 组件传递的是 m.prop() 结果 — 而不是 m.prop 函数本身——因此他们不能传回他们的结果。

你的函数逻辑在某处我找不到:数学运算正在返回 NaN。但是,我不确定预期的逻辑是什么(使用抽象函数和 属性 名称很难理解!)。祝你好运!


我发现很难遵循数据和分配的流程,因此冒昧地稍微重构了您的代码:与其将 m.prop 分配给对象并在视图中按名称查询这些属性,不如将prop 直接传递。我也有相同的名称 - value 到处都是以避免混淆。显然,当您的应用程序需要处理更多数据点时,这可能不合适,但我发现通过这些简化更容易推理这个特定示例:

var App = {
  controller: function() {
    return m.prop(10)
  },
  view: function(value) {
    return m("div",
      m("input", {
        onchange: m.withAttr("value", value), 
        value: value()
      }),

      m(App2, value)
    )
  }
}

var App2 = {
  controller: function() {
    return {
      m1: function ( value ) {
        return {
          a: parseInt(value)+1, 
          b: parseInt(value)+2, 
          c: parseInt(value)+3
        }
      },

      m2: function ( value ) {
        m2Obj = this.m1(value)

        return {
          d: parseInt(m2Obj.a)+4,
          e: parseInt(m2Obj.b)+5,
          f: parseInt(m2Obj.c)+6
        }
      }
    }
  },
  view: function(ctrl, value) {
    return m('div',
      m("input", {
        onchange: m.withAttr("value", value(ctrl.m1(value()))), 

        value: 
          ctrl.m1(value()).a+","
         +ctrl.m1(value()).b+","
         +ctrl.m1(value()).c
      }),

      m("input", {
        onchange: m.withAttr("value", value(ctrl.m2)), 

        value: 
          ctrl.m2(value()).d+","
         +ctrl.m2(value()).e+","
         +ctrl.m2(value()).f
      })
    )
  }
}

m.mount(document.body, App)