小编Chi*_*uin的帖子

作为一种帮助我学习ReactJS的方法,我正在设置一些真正应该容易的东西,但事实证明这对我来说有些棘手.

我想在ReactJS中设置一些托管的复选框组.在HTML中,复选框"字段"实际上由许多共享共同NAME属性的input type ="checkbox"元素组成.据我了解,这只是一种应该符合ReactJS组成性质的UI元素.

我有两个ReactJS组件:

首先,CheckboxField用于复选框组中的每个条目 - 即每个输入类型="复选框"HTML元素.

其次,CheckboxFieldGroup用于每组复选框条目 - 即每组HTML元素共享一个共同的NAME属性.CheckboxFieldGroup组件根据传递给它的初始props创建了许多CheckboxField组件.

State在CheckboxFieldGroup组件中进行管理,而不是在单个CheckboxField级别进行管理.从我所读到的,你应该把状态作为最有意义的水平来管理.对我而言,将它放在CheckboxFieldGroup级别更有意义.

当CheckboxFieldGroup首次运行时,它的初始状态将作为一个数组从其最初的props,也是一个数组创建.render方法(实际上是renderChoices方法)遍历其状态数组,并将每个状态成员的属性向下传递给CheckboxField组件,作为后者的props.当用户勾选/取消选中其中一个复选框时,该事件将通过回调传递给其所有者CheckboxFieldGroup的handleChange方法.此方法通过询问其id属性来确定已更改哪个复选框,然后通过setState()调用对CheckboxFieldGroup的状态数组的正确成员进行相应的更改.这会导致CheckboxFieldGroup自动重新呈现,新的状态数组被传递给各个CheckboxField组件,因此'

/** @jsx React.DOM */

var CheckboxField = React.createClass({
    propTypes: {
        values: React.PropTypes.object.isRequired
    },
    getDefaultProps: function () {
        return {
            values: {
                label: "Place holder text"                
            }
        };
    },
    render: function() {
        return (
            <label htlmFor={this.props.values.id}>
                <input type="checkbox"
                    name={this.props.values.name}
                    id={this.props.values.id}
                    value={this.props.values.value}
                    checked={this.props.values.checked}
                    onChange={this.handleChange} />
                {this.props.values.label} <br />
            </label>
        );
    },
    handleChange: function(event) {
        // Should use this to set parent's state via a callback func.  Then the
        // …

这里是 Angular/Typescript 的新手。

我已经设置了一个导出的辅助函数 JavaScript 库，我知道这些函数想要导入到 Angular 组件中，并在这些组件的 .html 模板文件中使用。

这是我的 Javascript 库 template-functions/data-types.ts：

export const isNumeric = val => !Array.isArray(val) && (val - parseFloat(val) + 1) >= 0;

这是我导出的一个简单的箭头函数：

以下是我将其导入组件的方法：

import { Component, OnInit, Input } from '@angular/core';
import { MyModel } from '../model/my-model';
import { isNumeric } from '../template-functions/data-types';

@Component({
  selector: 'my-module',
  templateUrl: './my-module.html'
})

export class MyModule implements OnInit {

  @Input() public mymodeldetails: MyModel;

  constructor() { }

  ngOnInit() { }

  // isNumeric = val => !Array.isArray(val) && …