使用React和Meteor和Simple Schema创建动态单选按钮（使用pup样板）

Question

我是新来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事件处理程序不起作用，缺少什么？

注意：在网页上，我看到单选按钮在收音机选择时发生变化，但新值不会被保存。

Answer 1

1. 从docs“您可以使用schema.getAllowedValuesForKey(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} /> 
   

   对于箭头功能正常工作，您需要添加通天插件用于转换类属性。做meteor npm install --save-dev babel-plugin-transform-class-properties并添加以下到您的.babelrc

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