使用阵营LinkedStateMixin用于文本输入不重新渲染预期

Question

这里的渲染功能为我反应的组分之一：

render: function() { 
    var valueLink = this.linkState.value; 
    var handleBlur = function(e) { 
     valueLink.requestChange(e.target.value); 
    }; 
    return (
     <input 
      type="text" 
      defaultValue={valueLink} 
      onBlur={handleBlur} 
     /> 
    ); 
} 

我使用骨干反应。在模型上设置属性后，该组件调用它的render函数。骨干模型得到适当设置，但输入字段不呈现在模型上设置的值。

基本上当render函数在valueLink.value更改后被调用时，输入字段不会反映此更改。

我试过使用value而不是defaultValue但这使得它成为一个受控组件。

我也不想使用valueLink，因为它为每个按键设置状态，而我只是为了触发onBlur。

任何想法？ （请让我知道如果你需要更多的信息。）

Answer 1

从阵营文档

LinkedStateMixin增加了一个方法来 链路状态（）叫你的阵营组成部分。 linkState（）返回一个ReactLink对象，该对象包含React状态的当前值和用于更改它的回调。

在您的示例中，不是this.linkState.value，而是将状态变量传递给linkState。实施例this.linkState（ '信息'）

var Component = React.createClass({ 
    mixins: [React.addons.LinkedStateMixin], 
    getInitialState: function() { 
     return {message: 'Hello!'}; 
    }, 
    render: function() { 
     var valueLink = this.linkState('message'); 
     var handleBlur = function(e) { 
      valueLink.requestChange(e.target.value); 
     }; 
     return (
     <div> 
     <input 
      type="text" 
      defaultValue={valueLink.value} 
      onBlur={handleBlur} 
     /> 
     <br /> 
     {this.state.message} 
     </div> 
    ); 
    } 
}); 

React.render(<Component />, document.body); 

http://jsfiddle.net/kirana/ne3qamq7/12/