javascript - 使用 React、Meteor 和 Simple Schema 创建动态单选按钮(使用 pup 样板)

Question

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

我正在尝试将icon的输入 radio 代码添加到/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'],
},

我有两个问题:

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

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

Answer 1

1. 来自docs “您可以使用 schema.getAllowedValuesForKey(key) 获取键的允许值数组。”

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

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

   并像这样使用它:

   <Radio onChange={this.handleRadioSelection} />
   

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

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