React修改Textarea值

Question

我正在研究一个基本上是记事本的项目.虽然在进行ajax调用时更新了它的值,但我遇到了问题.我尝试设置textarea的value属性,但是不能对其值进行更改.如何在状态上进行更改textarea的值更改并可以进行编辑.

我的代码如下.

在父类中

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

在Editor类中

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上提供的示例的直接副本

Answer 2

作为 React 世界的新手，我could not edit在 textarea 和struggledbinding 中遇到了类似的问题。当涉及到反应时，值得了解controlled和了解uncontrolled元素。

由于以下uncontrolled textarea原因无法更改以下值value

 <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"