ReactJS 组件文本区域在状态更改时不更新

问题
我正在尝试编写日志/组织应用程序，但遇到了令人沮丧的错误。

这是我的组件：

1. import React from 'react';
   
2. 
   
3. const Note = (props) => {
   
4.   let textarea, noteForm;
   
5.   if (props.note) {
   
6.     return (
   
7.       <div>
   
8.         <button onClick={() => {
   
9.           props.handleUpdateClick(props.selectedFolderId, props.selectedNoteId, textarea.value);
   
10.         }}>
    
11.           Update
    
12.         </button>
    
13.         <textarea
    
14.           defaultValue={props.note.body}
    
15.           ref={node => {textarea = node;}}
    
16.         />
    
17.       </div>
    
18.     );
    
19.   } else {
    
20.     return <div></div>;
    
21.   }
    
22. };
    
23. 
    
24. export default Note;

复制代码

当前的情况是，每当我在notes之间切换并重新提交note.body属性中带有新内容的note组件时，文本区域不会改变并保留上一个note的内容。我尝试过使用textarea的value属性而不是defaultValue属性，这并不能解决组件重新提交时textarea内容不改变的问题，但是当我这样做时，我&amp;#39 ;m 可以通过在 textarea 字段中输入来更新

有谁知道我既可以允许用户在文本字段中键入以更新注释，又可以在我呈现不同的注释时更改文本区域的内容的方法？

谢谢

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

1. const Note = React.createClass({
   
2. 
   
3.   getInitialState() {
   
4.         return {
   
5.         text : this.props.note.body
   
6.     }
   
7.   },
   
8. 
   
9.   componentWillReceiveProps: function(nextProps) {
   
10.     if (typeof nextProps.note != 'undefined') {
    
11.         this.setState({text: nextProps.note.body });
    
12.     }
    
13.   },
    
14. 
    
15.   render() {
    
16.     if (this.props.note) {
    
17.       return (
    
18.         <div>
    
19.           <button onClick={(e) => {
    
20.             // Fire a callback that re-renders the parent.
    
21.             // render(this.textarea.value);
    
22.           }}>
    
23.             Update
    
24.           </button>
    
25.           <textarea
    
26.             onChange={e => this.setState({ text : e.target.value })}
    
27.             value={this.state.text}
    
28.             ref={node => {this.textarea = node;}}
    
29.           />
    
30.         </div>
    
31.       );
    
32.     } else {
    
33.       return <div></div>;
    
34.     }
    
35.   }
    
36. });

复制代码

如果您正在使用 redux，您还可以在输入的更改事件上触发一个操作以触发重新渲染。您可以将输入值保存在减速器中。