Никита Гущин

С redux'ом это будет выглядеть вот так:
erikras.github.io/redux-form/#/examples/deep?_k=3m09yp

UPD1. Примерно так будет выглядеть. Но я бы фильтр списка работников поместил в select. Тогда вам нужно будет получать из стора значения формы и тоже самое делать + можно использовать reselect для оптимизации всего этого дела

UPD2. Я обновил код немного. Старая версия не работала...

class MyForm extends Component {
  render() {
    const { handleSubmit, fields: { workers }, workersList } = this.props
    const selectedWorkersIds = workers.map(workerField => workerField.value.id)
    const finalWorkersList = workersList.filter(
      worker => selectedWorkersIds.indexOf(worker.id) === -1
    )
    return (
      <form onSubmit={handleSubmit}>
        <WorkersMultiInput
          field={workers}
          workersList={finalWorkersList}
          />
      </form>
    )
  }
}

class WorkersMultiInput extends Component {
  render() {
    const { field, workersList } = this.props

    return (
      <div>
        {
           field.map((workerField, i) => {
             // Просто добавим в список выбранного воркера 
             const finalWorkerList = [ workerField.value, ...workersList ]            
             return (
               <WorkerInput key={i} field={workerField} workersList={finalWorkersList} />
             )
           }
        }
      </div>
    )
  }
}

Первый и второй вариант очень похожи. Преимущества перед третьим вариантом в том, что у вас метод будет забинден на this:

class ... {
  consoleLog = () => { 
    //Второй вариант объявления
    console.log('Второй вариант');
  }

  render() {
     return (
       <button onClick={this.consoleLog} type="button"> click me </button>
     )
  }
}

В первом и втором случае вы не потеряете this при передаче метода как callback в onClick.

https://github.com/erikras/react-redux-universal-h...

Если вам нужно плавно скрыть элемент - CSSTransitionGroup вполне подойдет. Прочтите документацию - https://facebook.github.io/react/docs/animation.html (не вижу смысла здесь ее переписывать). В общем принцип работы таков - компонент CSSTransitionGroup сохранит элемент в DOM на время перехода (анимации) и сразу после ее завершения - удалит (если речь об удалении DOM).

Вот так у меня выглядит код для такого меню:

<CSSTransitionGroup transitionName="ProductCategoriesMenu--submenu-transition" transitionEnter={false}>
          {category.products.length && isCategorySelected ? this.renderSubMenu(category) : null}
        </CSSTransitionGroup>

.ProductCategoriesMenu--submenu-transition-leave {
  max-height: 1000px;
  overflow: hidden;
}

.ProductCategoriesMenu--submenu-transition-leave-active {
  max-height: 0;
  transition: max-height 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

Это props компонента.

Вы банально теряете указатель на this:
<Input ... onChange={this.change}>

Попробуйте сделать автобинд:

change = () => {
        console.log("WTF");
        this.setState({ open: !this.state.open })
    };

UPD1
Или биндите ее в конструкторе (равносильно методу выше, но это не удобно)

constructor(...args) {
        super(...args);
        this.state = {
            open: false,
            value: 'select'
        };
        this.change = this.change.bind(this)
    }

Ошибки?

Проверьте на что ссылается this. И вызов функции в параметрах по-умолчанию смотрится не к месту)
handleSubmit(data=this.getFormData()) {

У браузера есть history api с помощью которого можно отслеживать переход по страницам и вместо того, чтобы запрашивать страницу с сервера - сделать запрос, получить JSON-данные и отрендерить страницу прямо на клиенте.

Такие приложения называют SPA и для их разработки используют фреймворки - react (не библиотека, а вместе с инфраструктурой), angular2, ember.

Сервер в этом случае выглядит как REST API (отдает JSON данные) и может быть реализован на чем угодно. Обычно это PHP (symfony2\laravel\yii\...), nodejs, Java (spring MVC), go, ruby и так далее. В зависимости от задач.

У вас приложение состоит из двух частей:
- это глупые (dumb) компоненты, по факту это почти все Ваши компоненты. Они просто рендерят props
- это так называемые контейнеры (или controller-view pattern), такие компоненты привязаны к redux (например) и у них есть логика.

react-router - это самое популярное (и на мой взгляд - лучшее) решение для роутинга. Не относитесь к этому как к вью. Просто удобней всего было сделать роуты как компоненты (но можно использовать и простые JS объекты). А сам роутер по определению должен рендерится, т.к. он и отображает нужный компонент в зависимости от url.

Используйте https://github.com/brigand/react-mixin

Бывают изоморфные приложения - они действительно без node не запустятся. По факту разработка происходит так - ты пишешь код react + jsx + ES6 + ... . Затем скармливаешь все это вебпаку (а он babel'у) и на выходе у тебя получается транслированный .js файл, который можно просто подключить как любой другой файл и все будет работать. Можно делать это рантайм - но я таким не занимался и не очень понимаю зачем это делать в реальных проектах.

Посмотрите это https://github.com/exponentjs/react-native-inverti...

UPD1:

Использовать ref можно только в родительском компоненте: в вашем случае FilterItems.

checkedChange(name, val) {
  this.setState({ [name]: val });
}

class FilterItems extends React.Component {
    render() {
      return (
        <div>
          <input onChange={(e) => this.props.handleChange('show_title1', e.target.checked)} 
            type="checkbox" 
            checked={this.props.show_title1}/>Столбец 1

          <input onChange={(e) => this.props.handleChange('show_title2', e.target.checked)} 
            type="checkbox" 
            ref="show_title2" 
            checked={this.props.show_title2}/>Столбец 2
        </div>
     );
    }

Рабочий пример - jsfiddle.net/yuvuyrhv/25