使用 React 和 Meteor 以及简单模式创建动态单选按钮(使用 pup 样板)

Creating dynamic radio buttons with React and Meteor and Simple Schema (using pup boilerplate)

我是 reactJS 的新手,我正在学习如何使用 pup 样板来使用单选按钮。

我正在尝试将 icon 的输入无线电代码添加到 /imports/ui/components/DocumentEditor/DocumentEditor.js,这是我目前所在的位置:

<FormGroup>
  <ControlLabel>Icon</ControlLabel>
  {['mobile', 'tablet', 'laptop', 'tv'].map((el, i) =>
    <Radio 
      ref={icon => (this.icon = icon)} 
      key={i} 
      name="icon" 
      value={el} 
      onChange={e => this.handleRadioSelection(e)}
      inline>
      <i className={`fa fa-3x fa-${el}`}></i>
    </Radio>
  )}
</FormGroup>

处理者:

handleRadioSelection (e) {
  const { name, value } = e.target;

  this.setState({
    [name]: value
  });
}

架构(使用 simpl-schema

icon: {
  type: String,
  label: 'The icon that better represents the platform.',
  allowedValues: ['mobile', 'tablet', 'laptop', 'tv'],
},

我有 2 个问题:

  1. 我的数组是硬编码的,我想从架构中导入 allowedValues 数组,该怎么做?
  2. 我的 onChange 事件处理程序不起作用,缺少什么?

注意:在网页上我看到单选按钮随着单选按钮的选择而改变,但新值没有被保存。

  1. docs"You can use schema.getAllowedValuesForKey(key) to get the allowed values array for a key."

  2. 您需要将函数绑定到 this 上下文。阅读有关该主题的更多信息,例如here。因此,简而言之,要么在构造函数中执行 this.handleRadioSelection = this.handleRadioSelection.bind(this); 或使其成为箭头函数:

    handleRadioSelection = (e) => {
      const { name, value } = e.target;
    
      this.setState({
        [name]: value
      });
    }
    

    并像这样使用它:

    <Radio onChange={this.handleRadioSelection} />
    

    要使箭头功能正常工作,您需要添加用于转换 class 属性的 babel 插件。执行 meteor npm install --save-dev babel-plugin-transform-class-properties 并将以下内容添加到您的 .babelrc

    {
      "plugins": ["transform-class-properties"]
    }