Question

我需要什么

我需要“构建”并“编辑”具有多个动态输入的表单。我有一个表单，但用户可以添加其他输入。

我的工作方式

之前我已经“构建”了表单，首先我使用ref查找我的内容然后在第二次使用input value从服务器“加载”我的内容并添加了state来“编辑”它。

问题

现在，对于其他表单，用户可以根据需要添加更多输入。因此，“构建”不是我认为的问题。对于“编辑”，我不知道用户之前添加了多少输入，所以要添加input value以查看它没关系，但要编辑值我需要state并初始化它，但是我不知道如何动态初始化多个states。

我的基本代码

@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>`

（我没有把所有的代码，但是input1 = dataFromServer）

我如何拥有input2，input3等......动态？

感谢阅读！

Answer 1

只有在第一次渲染之前，才会调用getInitialState（）。

但是，即使未在getInitiaState（）中声明它们，您也可以使用任意数量的对象添加和完成您的状态;

让我们说用户点击按钮添加输入

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

这样的事情应该有用。希望它有所帮助，请告诉我。

ReactJS多动态输入值

1 个答案: