阵营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'));

答

随着什么@BinaryMuse曾建议，你还必须结合readFile方法这样

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

这里是更新demo

这个作品！非常感谢:)是否有一些你知道的文档解释了这一点？ – EmmaGamma

为了获得更好的性能，建议在构造函数级别使用绑定。 @emilySmitley请参阅此处获取有关使用绑定此参考的文档：https：//facebook.github.io/react/docs/reusable-components.html#no-autobinding –

答

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

如果做决定使用的孩子，他们会像defaultValue。

阵营JS视图不会重新渲染上的setState（）

相关推荐