Создание динамических переключателей с помощью React и Meteor и Simple Schema (с использованием шаблона щенка)

Question

Я новичок в реагировании на JS, и я учусь тому, как использовать радиокнопки, используя шаблон щенка.

Я пытаюсь добавить входной радиокод для icon в https://github.com/cleverbeagle/pup/blob/master/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
  });
}

схема (с использованием упрощенной схемы)

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

У меня есть 2 вопроса:

1. Мой массив жестко запрограммирован, и я хотел бы импортировать из схемы массив allowValues, как это сделать?
2. Мой обработчик события onChange не работает, чего не хватает?

Примечания: на веб-странице я вижу переключатели, которые меняются при выборе радио, но новое значение не сохраняется.

Answer 1

1. из документов "Вы можете использовать schema.getAllowedValuesForKey(key) получить массив разрешенных значений для ключа."

2. Вам нужно привязать функцию к this контекст. Подробнее об этом, например, здесь. Итак, короче говоря, либо в конструкторе сделать 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"]
   }