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

Question

将 React js 0.13.1 和 es6 与 babel 结合使用：

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

当 onChange 事件触发时，它使用 FileReader API 将文件读取为文本，然后调用 setState({text: <text from the file>})。没问题。

问题是，当您 select 并打开一个文件时，文本区域中的文本没有任何变化...它只是保留初始化时使用的任何文本。似乎 React 在 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'));

Answer 1

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

If you do decide to use children, they will behave like defaultValue.

Answer 2

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

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

这是更新后的 demo

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

React JS view not re-rendering on setState()

javascript

state

render

reactjs