反应修改文本区域值

Question

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

我的代码如下。

在父类中

<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，因为在页面加载时 textarea 的值是未知的，当我尝试将数据放在 textareas 之间时没有任何反应。我希望它在状态更改时获取状态值，但在两者之间可以编辑。

谢谢

编辑

我设法使用 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
};

Answer 2

作为 React 世界的新手，我遇到了类似的问题，我 could not edit textarea 和 struggled 绑定。在反应方面，值得了解 controlled 和 uncontrolled 元素。

由于value，以下uncontrolled textarea的值无法更改

 <textarea type="text" value="some value"
    onChange={(event) => this.handleOnChange(event)}></textarea>

以下uncontrolled textarea的值可以因为使用defaultValue或no value attribute而改变

<textarea type="text" defaultValue="sample" 
    onChange={(event) => this.handleOnChange(event)}></textarea>

<textarea type="text" 
   onChange={(event) => this.handleOnChange(event)}></textarea>

以下controlled textarea的值可以改变，因为如何 值被映射到一个状态以及onChange 事件监听器

<textarea value={this.state.textareaValue} 
onChange={(event) => this.handleOnChange(event)}></textarea>

这是我使用不同语法的解决方案。我更喜欢auto-bind 而不是手动绑定，但是，如果我不使用{(event) => this.onXXXX(event)}，那么这将导致textarea 的内容不可编辑或event.preventDefault() 无法按预期工作。我想还有很多东西要学。

class Editor extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      textareaValue: ''
    }
  }
  handleOnChange(event) {
    this.setState({
      textareaValue: event.target.value
    })
  }
  handleOnSubmit(event) {
    event.preventDefault();
    this.setState({
      textareaValue: this.state.textareaValue + ' [Saved on ' + (new Date()).toLocaleString() + ']'
    })
  }
  render() {
    return <div>
        <form onSubmit={(event) => this.handleOnSubmit(event)}>
          <textarea rows={10} cols={30} value={this.state.textareaValue} 
            onChange={(event) => this.handleOnChange(event)}></textarea>
          <br/>
          <input type="submit" value="Save"/>
        </form>
      </div>
  }
}
ReactDOM.render(<Editor />, document.getElementById("content"));

库的版本是

"babel-cli": "6.24.1",
"babel-preset-react": "6.24.1"
"React & ReactDOM v15.5.4"