Как с помощью react.js добавлять элементы в select?

Question

[ivan gi]

Как с помощью react.js добавлять элементы в select?

var  SelectPeople = React.createClass({  // реактовский объект
    
    render : function(){
        $(document).ready(function() {
            $('#example-dropRight').multiselect({
                buttonWidth: '400px',
                dropRight: true
            });
        });

       var x
       $.ajax({   // получаю от сервера jason который надо вставить в select
            url: "/list",
            type: "POST",
            contentType: "application/json",
            processData: false,
            success: function(a){
                   console.log(a)
                }
            },
            error: this.onAjaxError
        })
                   return (

			<select id="example-dropRight" multiple="multiple">
                       </select>
		)
	}

Как добавить и вообще манипулировать данными? Как установить value и option? И как считать?
Заранее спасибо!!!

Answer 1

[Никита]

У вас аж 2 одинаковых вопроса на Тостере. Неужели из официальной документации ничего не понятно?

Не настаиваю делать именно так, писал на коленках, но это должно работать:

var SelectPeople = React.createClass({ 

	getInitialState: function(){
		return {items: []};
	}
	componentDidMount: function(){
		$.ajax({ 
			url: "/list",
			type: "POST",
			contentType: "application/json",
			processData: false,
			success: function(a){
       		this.setState({items: a}); // a === {'one': 'two'}
       	}
       },
   },
   render: function(){
   		var items = Object.keys(this.state.items).map(function(val, index) {
   			return <option key={index} value={val}>this.state.items[val]</option>;
   		}.bind(this));
   		return (
   			<select id="example-dropRight" multiple="multiple">
   				{items}
   			</select>
   		)
   }
});

Посчитать количество сможем? ;)
P.S. Табуляция не распознаёт JSX, просьба не обращать внимание

Answer 2

[CapeRatel]

Также как и везде.
Выложите код. Что сделали уже. Вас поправят. А писать за вас никто код не будет.
Не бывает на все готовых Гугл-решений. Иногда надо думать и разбираться как работает инструмент.

Answer 3

[vsuhachev]

В реакт я новичек, но доже мне видно, что так работать не должно.
Вот почитайте про жизненный цикл компонента. Насколько я понимаю вам нужно:

1. запрос к серверу - сделать в функции componentDidMount на этапе первоначального создания компонента. Это метод вызывается только 1 раз, что нам и нужно
   
2. в состояние компонента в функции getInitialState положить флаг "данных пока нет"
   
3. по итогам загрузки, если все хороша то данные загнать в состояние, иначе в состояние сохранить признак ошибки обращения к серверу. Состояние можно менять с помощью метода компонента setState
   

Ну а в функции render анализировать на наличие одного из случаев

• если в состоянии установлен флаг "данных пока нет", то выводить надпись "загрузка..."
  
• если в состоянии появились данные то вывести их
  
• если в состоянии компонента есть признак ошибки - выводить надпись "ошибка..."
  

PS: Надеюсь сильно не наврал :)

Comments

[ivan gi]

спасибо