react创建表单组件时，不能修改表单的值？

Question

// 引入表单组件
import React, { Component } from 'react'
import Formsy from 'formsy-react'
import FRC from 'formsy-react-components'
const { Checkbox, CheckboxGroup, Input, RadioGroup, Row, File, Textarea, Select } = FRC

// 通过后台返回的字段进行查表
let createForm={
      name:{
        type:"input",
        params:{
          name:"startup[name]",
          label:"名字",
          defaultValue:""
        }
      },
      features:{
        type:"textarea",
        params:{
          name:"startup[features]",
          label:"亮点",
          defaultValue:""
        }
      },
      team_highlight:{
        type:"textarea",
        params:{
          name:"startup[team_highlight]",
          label:"特色",
          defaultValue:" "
        }
      },
      target_market:{
        type:"textarea",
        params:{
          name:"startup[target_market]",
          label:"市场分析",
          defaultValue:""
        }
      }
    }
    // 创建表单方法，template是根据返回字段的type类型(createForm.params)，判断是创建<Input/>还是<Textarea/>, param是根据返回的字段createForm.params
    function initCompleteForm(arr){
      var inputItem = [], inputObject, template
      if(arr){
        arr.map((item,index) => {
          let type = createForm[item].type
          let params = createForm[item].params
          switch(type){
            case "text":
              template = Input
              break
            case "file":
              template = File
              break
            case "textarea":
              template = Textarea
              break
            case "select":
              template = Select
              break
            default:
              return null
          }
          inputObject = React.createElement(template, params)
          inputItem.push(inputObject)
        })
      }
      return inputItem
    }
    // colunms是返回的字段的数组, inputArr是生成的表单项组成的数组
    var inputArr = initCompleteForm(columns)
    var html = inputArr.map((item,index) => {
        return (
          <div key ={index}>
            {item}
          </div>
        )
      })
    // 将遍历出来的表单项，插入到表单中 ， 点击跳过会请求一下API，返回一个新的字段，重新生成一个新到表单项
    <MyForm>
        {html}
        <input
            className="btn btn-cancle btn-item"
            formNoValidate={true}
            type="button"
            defaultValue="跳过"
            onClick={() => {NextForm(startup.id,index)}} />
    </MyForm>

现在的问题是，每一次创建出的新的表单项时是保留之前填过的表单的值，也就是params中设置的defaultValue="",不起作用，不知道是为什么

Answer 1

如果传入来 value，input 之类的组件需要添加 onChange 事件来管理 value，否则 value 无法被修改。如果 在 prop 里面不传 value 那么 input 会处于 uncontrolled 状态，此时可以随意输入内容。

Answer 2

formsy有个resetForm方法，每次跳过的时候调用一下...通过这个办法解决了，但还是不明白为什么defaultValue不起作用

Answer 3

不了解formsy这个组件， 推荐使用redux-form 这个组件，社区产品。