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

【问题标题】：using valueLink, child input field unable to change使用 valueLink，子输入字段无法更改
【发布时间】：2014-09-01 04:16:45
【问题描述】：

我开始玩 reactjs，对于这个项目，我有 ->

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

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

虽然我需要使用 LinkedState mixin。

所以，我做这样的事情 ->

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

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

【问题讨论】：

searchTermLink 是否在每个级别从 CustomReactChild 传递到 CustomReactChildsChild？
嘿，道格拉斯，是的，但方式有点古怪。刚刚更新了 CustomReactChild 的外观
查看这里的日志，jsfiddle.net/kb3gN/3602 - 我认为部分问题是在 MainFoo 更新它之前，模式弹出窗口正在重新渲染（或至少运行“受控输入”处理程序）状态。我建议将模型合并在一起，这样只有一个 React.renderComponent 调用，或者将状态分解到共享存储中，输入更新并从中获取更改事件。
嗨，道格拉斯，谢谢！单个 renderComponent 解决了这个问题。我认为您的 cmets 值得一个很棒的答案。如果您将其作为答案弹出，我很乐意向您提出问题。谢谢！

标签： reactjs

【解决方案1】：

@Douglas 在 cmets 中给出了一个很棒的答案 -->

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

【讨论】：