ReactJS組件textarea沒有更新狀態變化

我正在嘗試寫一個記錄/組織應用程序，我遇到了一個令人沮喪的錯誤。ReactJS組件textarea沒有更新狀態變化

這裏是我的組件：

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道具新內容的筆記組件切換，textarea的沒有變化，保持從內容前面的說明。我已經嘗試使用值屬性，而不是defaultValue屬性的文本區域，這doe修復文本區域內容的問題，當組件重新顯示時不會更改，但是當我這樣做時，我可以更長時間鍵入textarea字段更新筆記

Doe任何人都知道一種方式，我可以讓用戶輸入文本字段來更新筆記以及在渲染不同筆記時使textarea內容發生變化？

謝謝

來源

2017-01-21 Yonatan Meschede-Krasa

的問題是，其值設置爲你的道具將導致所有組件的重新呈現使用相同的道具，所以新的文本被抹殺。一種解決方案是將文本保留在組件的本地狀態中。要同時收聽道具變化，您可以在收到新道具時設置狀態。

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/

如果使用的是終極版，您也可以火上輸入的變化事件的動作來觸發重新繪製。您可以在減速器中保留輸入值。

來源

2017-01-21 03:18:49

ReactJS組件textarea沒有更新狀態變化

回答

相關問題