React JS 视图未在 setState() 上重新渲染

Posted 2023-02-22

技术标签:

【中文标题】React JS 视图未在 setState() 上重新渲染【英文标题】：React JS view not re-rendering on setState() 【发布时间】：2015-06-30 23:26:00 【问题描述】：

将 react js 0.13.1 和 es6 与 babel 一起使用：

我有一个文件输入和一个文本区域，我希望用户能够选择文本文件并将文本附加到文本区域。

当 onChange 事件触发时，它使用 FileReader API 将文件读取为文本，然后调用setState(text: <text from the file>)。效果很好。

问题在于，当您选择并打开一个文件时，文本区域中的文本不会发生任何变化……它只会保留初始化时使用的任何文本。似乎反应要么没有在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'));

【问题讨论】：

【参考方案1】：

除了@BinaryMuse 的建议外，您还必须像这样绑定readFile 方法

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

这是更新后的demo

【讨论】：

这行得通！非常感谢 :) 是否有一些您知道的文档可以解释这一点？为了获得更好的性能，react 建议在构造函数级别使用绑定。 @emilySmitley 有关使用绑定此参考的文档，请参阅此处：facebook.github.io/react/docs/…【参考方案2】：

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