相关疑难解决方法(0)

更新道具的状态在React Form中更改

我在使用React表单并正确管理状态时遇到问题.我在表单中有一个时间输入字段(在模态中).初始值设置为状态变量getInitialState,并从父组件传入.这本身就可以.

当我想通过父组件更新默认的start_time值时,问题出现了.更新本身发生在父组件中setState start_time: new_time.但是在我的表单中,默认的start_time值永远不会改变,因为它只定义一次getInitialState.

我试图用来componentWillUpdate强制改变状态setState start_time: next_props.start_time,这确实有效,但给了我Uncaught RangeError: Maximum call stack size exceeded错误.

所以我的问题是,在这种情况下更新状态的正确方法是什么?我是否以某种方式思考这个错误?

现行代码:

@ModalBody = React.createClass
  getInitialState: ->
    start_time: @props.start_time.format("HH:mm")

  #works but takes long and causes:
  #"Uncaught RangeError: Maximum call stack size exceeded"
  componentWillUpdate: (next_props, next_state) ->
    @setState(start_time: next_props.start_time.format("HH:mm"))

  fieldChanged: (fieldName, event) ->
    stateUpdate = {}
    stateUpdate[fieldName] = event.target.value
    @setState(stateUpdate)

  render: ->
    React.DOM.div
      className: "modal-body"
      React.DOM.form null,
        React.createElement FormLabelInputField,
          type: "time"
          id: "start_time"
          label_name: "Start Time" …
Run Code Online (Sandbox Code Playgroud)

reactjs

152
推荐指数
7
解决办法
19万
查看次数

标签 统计

reactjs ×1