React Изменение значений Textarea

Я работаю над проектом, который в основном блокнот. У меня возникают проблемы при обновлении значения <textarea> при вызове ajax. Я попытался установить свойство значения 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, потому что значение текстовой области неизвестно при загрузке страницы, и когда я пытаюсь поместить данные между текстовыми областями, ничего не происходит. Я хотел бы, чтобы он принимал значение состояния всякий раз, когда состояние изменяется, но между ними оно должно быть редактируемым.

Спасибо

редактировать

Мне удалось заставить его работать, используя jQuery, но вместо этого я хотел бы сделать это в React, я назвал это перед рендерингом:

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

Ответ 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
};

Ответ 2

Будучи новичком в мире React, я сталкивался с похожими проблемами, где could not edit текстовую область, и struggled с привязкой. Стоит знать об controlled и uncontrolled элементах, когда дело доходит до реакции.

Значение следующего uncontrolled textarea поля 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 событий 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"