陣營JS視圖不會重新渲染上的setState（）

使用與巴貝爾JS 0.13.1和ES6反應：陣營JS視圖不會重新渲染上的setState（）

我有一個文件的輸入和一個textarea，我希望用戶能夠選擇文本文件和將文本附加到textarea。

當onChange事件觸發時，它使用FileReader API將文件讀取爲文本，然後調用setState({text: <text from the file>})。這工作正常。

問題是，當你選擇並打開一個文件時，textarea中的文本沒有任何反應......它只是保留了它初始化的任何文本。看起來好像反應要麼不更新setState()之後的視圖，或者我只是拼寫錯誤。還不確定，但任何幫助表示讚賞！

這裏是我（簡化）代碼：

'use strict'; 

class TextApp extends React.Component { 
    constructor() { 
    this.state = { 
     text: 'wow' 
    }; 
    } 

    readFile(e) { 
    var self = this; 
    var files = e.target.files; 

    for (var i = 0, len = files.length; i < len; i++) { 
     var reader = new FileReader(); 

     reader.onload = function(upload) { 
     var textState = (self.state.text || '') + upload.target.result; 
     self.setState({ 
      text: textState 
     }); 
     }; 
     reader.readAsText(files[i]); 
    } 
    } 

    render() { 
    return (
     <div> 
     <TextInput text={this.state.text} /> 
     <FileInput onChange={this.readFile} /> 
     </div> 
    ); 
    } 
} 

class TextInput extends React.Component { 
    render() { 
    return (
     <textarea>{this.props.text}</textarea> 
    ); 
    } 
} 

class FileInput extends React.Component { 
    render() { 
    return (
     <div> 
      <input type="file" onChange={this.props.onChange} multiple /> 
     </div> 
    ); 
    } 
} 

React.render(<TextApp />, document.getElementById('reappct'));

來源

2015-04-23 EmmaGamma

隨着什麼@BinaryMuse曾建議，你還必須結合readFile方法這樣

<FileInput onChange={this.readFile.bind(this)} />

這裏是更新demo

來源

2015-04-23 02:37:45 Dhiraj

這個作品！非常感謝:)是否有一些你知道的文檔解釋了這一點？ – EmmaGamma

爲了獲得更好的性能，建議在構造函數級別使用綁定。 @emilySmitley請參閱此處獲取有關使用綁定此參考的文檔：https：//facebook.github.io/react/docs/reusable-components.html#no-autobinding –

使用<textarea value={this.props.text} />。見Why Textarea Value?：

如果做決定使用的孩子，他們會像defaultValue。

來源

2015-04-23 02:13:58

陣營JS視圖不會重新渲染上的setState（）

回答

相關問題