Question

我试图写一个笔记/组织应用程序，但我遇到了令人沮丧的错误。

这是我的组成部分：

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 prop中的新内容重新注释音符组件时，textarea不会更改并保留前一音符中的内容。我已经尝试使用value属性而不是defaultValue属性来处理文本区域，这样可以解决组件重新渲染时文本区域内容不会改变的问题，但是当我这样做时，我可以更长时间地键入在textarea字段中更新注释

任何人都知道我可以允许用户输入文本字段以更新注释以及在我呈现不同注释时更改textarea内容的方式吗？

谢谢

Answer 1

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

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事件触发一个动作以触发重新渲染。您可以在reducer中保留输入值。

Answer 2

由于componentWillReceiveProps现在不安全，Max Sindwani的答案现在已经过时了。

尝试以下步骤：

将组件转换为类
现在您可以添加shouldComponentUpdate()生命周期挂钩
创建事件处理程序并将其传递给onChange

在<textarea>中，您可以将defaultValue属性换成value（只需在处理程序中使用event.preventDefault（），以便用户可以根据需要继续更新文本）

    import React from 'react';

    export class Note extends React.Component {

    constructor(props) {
        super(props);
        this.state={text: this.props.note.body}
    }

    shouldComponentUpdate(nextProps) {
        if(nextProps.note.body !== this.state.text) {
            this.setState({text: nextProps.note.body})
            return true;
        }
        return false;
    }

    updateText = (event) => {
        event.preventDefault();
        this.setState({text: nextProps.note.body});
    }

 render() {
   if (this.props.note) {
     return (
       <div>
         <textarea
           onChange={this.updateText}
           value={this.state.text}
           name={'display'} 
         />
       </div>
     );
  } else {
     return <div></div>;
   }
 }});

ReactJS组件textarea不更新状态更改

2 个答案: