Redux — как хранить данные в input при рендере?

Question

[KELeborn]

Есть форма в приложении
Она служит для добавления и редактирования
Когда приходит от dispatch данные об редактировании, то поля должны заполняться данными
Какие проблемы:
Поля заполняются но не изменяются (value='.{..}')
Поля заполняются то когда редактируешь и рендерит но новому после dispatch то данные сбиваются назад (через componentDidUpdate)
Поля заполняются и меняются и хранят редактированные данные, НО со сдвигом на 1 предыдущее значение (через componentDidUpdate + храню через onChange в this.feilds={...})
defaultValue - не помагает, так как форма динамическая

constructor(props) {
		super(props);
		this.fields = {}
	}
onChangeName(e) {
		this.fields.tableName_input = e.target.value
	}
	onChangeParticipants(e) {
		this.fields.tableParticipants_select = e.target.value
	}
	componentDidUpdate(params){
		if (params.editing){
			console.log(params)
			let tableName_input = this.fields.tableName_input && this.fields.tableName_input || params.table.name
			ReactDOM.findDOMNode(this.refs.tableName_input).value = tableName_input
			let tableParticipants_select = this.fields.tableParticipants_select && this.fields.tableParticipants_select || params.table.participants
			ReactDOM.findDOMNode(this.refs.tableParticipants_select).value = tableParticipants_select
		}
	}

Comments

[Ninja Mate]

inputы сами покажите

[Антон Хмыров]

или я чего-то не понимаю и у вас форма со сложной логикой, или вы неправильно поняли как redux использовать. Почему нельзя в инпутовские value передавать значение из redux полученное в props через connect? И соответственно на onChange повешать сохранение изменений в хранилище

Answer 1

[Amazing-Space-Invader]

import React, { Component, PropTypes } from 'react'

class Main extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            inputValue: this.props.inputValue || ''
        };
    }

    handleNameChange(e) {
        this.setState({ inputValue: e.target.value });
    }

    render() {
        return (
            <div>
                <input type='text' onChange={ ::this.handleInputChange } />
                <div>input value: { this.state.inputValue }</div>
            </div>
        )
    }
}

export default Main