ReactJS多动态输入值

Question

What I need

I need to 'build' and 'edit' a form with multiple dynamic input. I have a form, but the user can add other input.

How I do

I already 'build' form before, first i was use the ref to find my content then in second time i was used the input value to 'load' my content from the server and added a state to 'edit' it.

The Problem

Now, for an other form, the user can add more input if he want. So for the 'build ' is not a problem I thinks. And for the 'edit' I don't how many input the user added before, so to added the input value for view it's ok, but to edit the value I need a state and initial it, but i don't know how I can initialized multiple states dynamically.

My basic code

@Component = React.createClass
    getInitialState: ->
        Input1: ''

    handelChange: (e)->
        @setState
            Input1: e.target.value

    render: ->
        `<form name="form" onSubmit={this.handleSubmit}>
                <input className="input" type="text" ref="name" name="name" value={this.state.input1} onChange={this.handelChange}/>
        </form>`

(I don't put all the code, but input1 = dataFromServer)

How I can have input2, input3 etc... dynamic ?

Thanks for reading!

Answer 1

You won't have several initial state, getInitialState() is called only before the first rendering.

However you can add and complete your state with as many objects as you want even if they were not declared in getInitiaState();

Lets say the user click on a button to add an input

handelChange: (e)->
        var newState = this.state;
        newstate["MyNewInput"] = "some initial value field";
        @setState
            newState

Something like that should work. Hope it helps, let me know.