reactjs - React 修改文本区域值

Question

我正在开发一个基本上是记事本的项目。我在进行 ajax 调用时更新 <textarea> 的值时遇到问题。我尝试设置文本区域的 value 属性，但无法更改其值。我怎样才能使状态改变时文本区域的值发生变化并且可以编辑。

我的代码如下。

在父类中

<Editor name={this.state.fileData} />

在编辑器类中

var Editor = React.createClass({
render: function() {
return (
    <form id="noter-save-form" method="POST">
    <textarea id="noter-text-area" name="textarea" value={this.props.name}></textarea>
    <input type="submit" value="Save" />
    </form>
);
}

});

我无法使用defaultValue，因为页面加载时文本区域的值未知，并且当我尝试在文本区域之间放置数据时没有任何反应。我希望它在状态发生变化时获取状态值，但可以在状态之间进行编辑。

谢谢

编辑

我设法使用 jQuery 让它工作，但想在 React 中完成它，我在渲染之前调用了它:

$('#noter-text-area').val(this.props.name);

Answer 1

我认为您想要以下内容:

父级:

<Editor name={this.state.fileData} />

编辑:

var Editor = React.createClass({
  displayName: 'Editor',
  propTypes: {
    name: React.PropTypes.string.isRequired
  },
  getInitialState: function() { 
    return {
      value: this.props.name
    };
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    return (
      <form id="noter-save-form" method="POST">
        <textarea id="noter-text-area" name="textarea" value={this.state.value} onChange={this.handleChange} />
        <input type="submit" value="Save" />
      </form>
    );
  }
});

这基本上是 https://facebook.github.io/react/docs/forms.html 上提供的示例的直接副本

React 16.8 更新:

import React, { useState } from 'react';

const Editor = (props) => {
    const [value, setValue] = useState(props.name);

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    return (
        <form id="noter-save-form" method="POST">
            <textarea id="noter-text-area" name="textarea" value={value} onChange={handleChange} />
            <input type="submit" value="Save" />
        </form>
    );
}

Editor.propTypes = {
    name: PropTypes.string.isRequired
};