ReactJS组件textarea不会在状态更改时更新 [英] ReactJS component textarea not updating on state change

问题描述

我正在尝试编写一个笔记记录/整理应用程序，但遇到了一个令人沮丧的错误.

I'm trying to write a note taking/organizing app and I've run into a frustrating bug.

这是我的组成部分:

import React from 'react';

const Note = (props) => {
  let textarea, noteForm;
  if (props.note) {
    return (
      <div>
        <button onClick={() => {
          props.handleUpdateClick(props.selectedFolderId, props.selectedNoteId, textarea.value);
        }}>
          Update
        </button>
        <textarea
          defaultValue={props.note.body}
          ref={node => {textarea = node;}}
        />
      </div>
    );
  } else {
    return <div></div>;
  }
};

export default Note;

按目前的状态，每当我在笔记之间切换并用note.body道具中的新内容重新呈现笔记组件时，文本区域不会更改并保留上一个笔记的内容.我尝试为文本区域使用value属性而不是defaultValue属性，这确实解决了组件重新渲染时文本区域内容不会更改的问题，但是当我这样做时，我可以在textarea字段中键入内容更新笔记

As it currently stands, whenever I switch between notes and rerender the note component with new content from the note.body prop, the textarea does not change and retains the content from the previous note. I've tried using the value attribute instead of the defaultValue attribute for the text area which doe fix the problem of the text area content not changing when the component rerenders, but when I do that I'm longer able to type in the textarea field to update the note

有人知道我可以同时允许用户在文本字段中输入以更新便笺以及在呈现不同便笺时更改文本区域内容的方法吗?

Doe anyone know a way I can both allow for users to type in the text field to update the note as well as have the textarea content change when I render different notes?

谢谢

推荐答案

问题是将值设置为prop将导致组件的所有重新渲染都使用相同的prop，因此将删除新文本.一种解决方案是将文本保留在组件的本地状态.要同时收听道具更改，您可以在收到新道具时设置状态.

The problem is that setting the value to your prop will cause all re-renders of the component to use the same prop, so new text is obliterated. One solution is to preserve the text in the local state of the component. To simultaneously listen to prop changes, you can set the state when you receive new props.

const Note = React.createClass({

  getInitialState() {
        return {
        text : this.props.note.body
    }
  },

  componentWillReceiveProps: function(nextProps) {
    if (typeof nextProps.note != 'undefined') {
        this.setState({text: nextProps.note.body });
    }
  },

  render() {
    if (this.props.note) {
      return (
        <div>
          <button onClick={(e) => {
            // Fire a callback that re-renders the parent.
            // render(this.textarea.value);
          }}>
            Update
          </button>
          <textarea
            onChange={e => this.setState({ text : e.target.value })}
            value={this.state.text}
            ref={node => {this.textarea = node;}}
          />
        </div>
      );
    } else {
      return <div></div>;
    }
  }
});

https://jsfiddle.net/69z2wepo/96238/

如果使用redux，还可以对输入的change事件触发操作以触发重新渲染.您可以将输入值保存在减速器中.

If you are using redux, you could also fire an action on the change event of the input to trigger a re-render. You could preserve the input value in a reducer.

这篇关于ReactJS组件textarea不会在状态更改时更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！