Question

我只有两个textareas。当您将文本输入到第一个文本区域时，文本应出现在第二个文本区域中。我已经检查过以确保事件正在解雇。该页面似乎无法呈现......请帮助，谢谢。

var OutputText = React.createClass({
  getInitialState: function() {
    return {
      text: ''
    };
  },
  handleChange: function(event) {
    this.setState({ text: event.target.value });
  },
  render: function() {
    return (
      <div>
        <h1 className='text-center'>Markdown Previewer</h1>
        <div className='row'>
          <div className='col-xs-4 text-center'>
            <textarea className='user-input' onChange={this.handleChange}></textarea>
          </div>
          <div className='col-xs-4 text-center'>
            <textarea>{this.state.text}</textarea>
          </div>
        </div>
      </div>
    )
  }
});

React.render(
  <OutputText />,
  document.getElementById('main-container')
);

Answer 1

Working JSFiddle

你不能使用像这样的反应孩子来设置textarea内的值。

您需要在value标记上添加textarea文字，如下所示：

<textarea value={this.state.text}></textarea>

此外，您应该使用ReactDOM.render，因为不推荐使用React.render：

ReactDOM.render(
  <OutputText />,
  document.getElementById('main-container')
);

这两个错误都在控制台中。

React不会重新渲染以反映setState

1 个答案: