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元素。

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

React修改Textarea值

2 个答案: