Question

我开始玩reactjs，对于这个项目，我有 - ＆gt;

输入字段
切换模态的按钮
- 模态有另一个输入字段。

我们如何让两个输入字段保持同步？

我虽然需要使用LinkedState mixin。

所以，我这样做 - ＆gt;

MainFoo = React.createClass
  mixins: [React.addons.LinkedStateMixin]
  getInitialState: ->
    searchTerm: ''
  render: ->
    input valueLink: @linkState('searchTerm') # this works
    CustomReactChild
      searchTermLink: @linkState('searchTerm') #passing into child.

CustomReactChild = React.createClass
  renderModal:
    unless @modal
      $anchor = $('<div>').appendTo('body');
      comp = (Modal 
               body: (CustomReactChildchild 
                         searchTermLink: @props.searchTermLink)
             ) #custom react modal class
      @modal = React.renderComponent comp, anchor
    @modal.show()
  render: ->
    label
      onClick: @renderModal
# Deep inside CustomReactChild
CustomReactChildsChild = React.createClass
  render: ->
    input valueLink: @props.searchTermLink # Am unable to change the value via this input

我错误地使用了这个吗？如何获取第二个输入以更改父输入的值，反之亦然？

Answer 1

@Douglas在评论中突然出现了一个很棒的答案 - ＆gt;

查看这里的日志，jsfiddle.net / kb3gN / 3602 - 我认为问题的一部分是模态弹出窗口在MainFoo更新状态之前重新渲染（或者至少运行“受控输入”处理程序）。我建议将模型合并在一起，这样只有一个React.renderComponent调用，或者将状态分解为一个共享存储，两个输入都更新并从中获取更改事件。 ```

使用valueLink，子输入字段无法更改

1 个答案: