將文本區域值保存爲與ReactJs div

Question

我只是想處理反應，所以我的問題可能看起來很簡單，但我仍然堅持它。

我有兩個塊（div.user-data__row），其中有一些值。我更改組件的狀態（handleChange函數），這些塊被替換爲文本字段（textarea.text）的狀態，我希望當我單擊保存按鈕並調用saveChange函數時，每個文本字段的值被傳送到塊（第1個文本區到第1個塊等）。

我找到了使用ref屬性來解決類似情況的例子，但後來發現這不再是一個實際的解決方案，因此也沒有人會這樣做。請幫我看看實際的實現路徑。

class UserData extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     edit: true, 
    }; 

    this.handleChange = this.handleChange.bind(this); 
    this.saveChange = this.handleChange.bind(this); 
    } 

    handleChange() { 
    this.setState(() => ({ 
     edit: !this.state.edit, 
    })); 
    } 

    saveChange() { 
    this.setState(() => ({ 
     edit: false 
    })) 
    } 

    render() { 
    if (this.state.edit) { 
     return (
     <div className="user-data"> 
      <div className="user-data__row">{this.props.userData.name}</div> 
      <div className="user-data__row">{this.props.userData.email}</div> 
      <button onClick={ this.handleChange }>Edit</button> 
     </div> 
    ); 
    } else { 
     return (
     <div className="user-data"> 
      <textarea className="text" defaultValue={this.props.userData.name}></textarea> 
      <textarea className="text" defaultValue={this.props.userData.email}></textarea> 
      <button onClick={ this.saveChange }>Save</button> 
     </div> 
    ) 
    } 
    } 
} 

Answer 1

因爲props是隻讀的，因爲& userData (email+name)可以在組件內部發生變化，你必須填寫道具值在狀態，則管理狀態之後就足夠了。

此外，你需要通過你的文字區域不受控制的組件轉換爲控制組件：

• 使用值，而不是默認值

• 實施的onChange與該值作爲處理程序的setState。

• textarea的值應該從狀態中讀取而不是props。

如果<UserData />道具可以從整個生命週期之外進行更新，則需要componentWillReceiveProps以後。您也有錯字if (!this.state.edit) {而不是if (this.state.edit) {。

class UserData extends React.Component { 
 
    state = { 
 
     edit: true, 
 
     userDataName: this.props.userData.name, // Populate props values 
 
     userDataEmail: this.props.userData.email, // Populate props values 
 
    }; 
 
    
 
    
 
    handleChange =() => { 
 
    this.setState((state) => ({ 
 
     edit: !state.edit, 
 
    })); 
 
    } 
 

 
    saveChange =() => { 
 
    this.setState(() => ({ 
 
     edit: false 
 
    })) 
 
    } 
 

 
    render() { 
 
    if (!this.state.edit) { 
 
     return (
 
     <div className="user-data"> 
 
      <div className="user-data__row">{this.state.userDataName}</div> 
 
      <div className="user-data__row">{this.state.userDataEmail}</div> 
 
      <button onClick={ this.handleChange }>Edit</button> 
 
     </div> 
 
    ); 
 
    } else { 
 
     return (
 
     <div className="user-data"> 
 
      <textarea className="text" value={this.state.userDataName} onChange={(e) => this.setState({userDataName: e.target.value})}></textarea> 
 
      <textarea className="text" value={this.state.userDataEmail} onChange={(e) => this.setState({userDataEmail: e.target.value})}></textarea> 
 
      <button onClick={ this.saveChange }>Save</button> 
 
     </div> 
 
    ) 
 
    } 
 
    } 
 
} 
 

 

 

 
ReactDOM.render(<UserData userData={{name: 'Abdennoor', email: 'abc@mail.com'}} /> , document.querySelector('.app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div class="app" />

Answer 2

你從this.props接收<div>值，這意味着它們的值應來自於一些外部源，並傳遞給您的組件。將這些值傳遞給組件props的方法不在此問題的範圍之內，它可以以非常不同的方式實現。通常它來自父組件或來自某個連接的商店。

您需要從<textarea>表單字段獲取值，可以直接使用（使用ref）或使用某個提供表單處理的第三方庫來完成。然後，這些值需要直接從組件的state或外部源（通過props）存儲（並獲得）。

不幸的是，您的問題的範圍太廣泛，無法給出更準確的答案，但希望這些信息能夠引導您找到某種解決方案。

Answer 3

您還可以使用contentEditable，它可以讓你編輯div的內容。

class UserData extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     edit: true 
    }; 

    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange() { 
    this.setState(() => ({ 
     edit: !this.state.edit 
    })); 
    } 

    render() { 
    const { edit } = this.state; 

    return (
     <div className="user-data"> 
     <div className="user-data__row" contentEditable={edit}>{this.props.userData.name}</div> 
     <div className="user-data__row" contentEditable={edit}>{this.props.userData.email}</div> 
     <button onClick={this.handleChange}> 
      {edit ? Save : Edit} 
     </button> 
     </div> 
    ) 
    } 
}