Question

使用react js 0.13.1和es6 with babel：

我有文件输入和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'));

Answer 1

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

如果你做决定使用儿童，他们的行为就像defaultValue。

Answer 2

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

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

以下是更新后的demo

React JS视图不能在setState（）上重新渲染

2 个答案: