ReactJsでdivにテキストエリアの値を保存

Question

私はReactに対処しようとしているので、私の質問はとてもシンプルに見えるかもしれませんが、まだ私はそれに固執しています。

いくつかの値がある2つのブロック（div.user-data__row）があります。私はコンポーネントの状態（handleChange関数）、これらのブロックがテキストフィールド（textarea.text）に置き換えられている状態を変更します。saveボタンをクリックして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)は、コンポーネント内で変更することができますので、あなたはそれが十分になります後の状態を管理し、その後、小道具状態で値を移入する必要があります。ハンドラとしてその値のSETSTATEとのonChange実装

の値を使用しての代わりにはdefaultValue

• ：

  また、あなたは、によって制御されるコンポーネントに制御されていないコンポーネントからあなたのtextareaを変換する必要があります。

• textareaの値は、state not 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

また、それはあなたがdivの内容を編集できるようになる、contentEditable使用することができます。

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> 
    ) 
    } 
}