使用陣營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/