ReactJS ersetzen Inhalt

Question

Ich habe ein Feld, das ein Datum mit der folgenden Komponente zeigt:

import React from 'react'; 
import Moment from 'moment'; 

export default class ChaserField extends React.Component { 
    render() { 
     return (
      <div onClick={this.props.onClick}> 
       {this.props.chaserDate != '0000-00-00' && this.props.chaserDate ? Moment(this.props.chaserDate).format('DD/MM/YYYY') : '-'} 
      </div> 
     ); 
    } 
} 

Die Mutter:

import React from 'react'; 
import Moment from 'moment'; 
import TrackingSentField from './TrackingSentField'; 
import ChaserField from './ChaserField'; 

export default class ShippingTable extends React.Component { 
    static contextTypes = {} 

    componentWillMount() { 
     this.setState({ 
      editingChaser: false, 
      editingTrackingSent: false 
     }) 
    } 

    handleTrackingSentField(e) { 
     this.setState({ 
      editingTrackingSent: true 
     }) 
    } 

    handleChaserField(e) { 
     this.setState({ 
      editingChaser: true 
     }) 
    } 

    render() { 
     var rowData = this.props.rows.map((row) => { 
      return (
       <tr key={row.id}> 
        <td>{row.position_ref}</td> 
        <td>{row.quantity}</td> 
        <td><a target="_blank" href={'/supplier/'+row.supplierId}>{row.name}</a></td> 
        <td>{row.warehouse_eta != '0000-00-00' && row.warehouse_eta ? Moment(row.warehouse_eta).format('DD/MM/YYYY') : '-'}</td> 
        <td>{row.customer_eta != '0000-00-00' && row.customer_eta ? Moment(row.customer_eta).format('DD/MM/YYYY') : '-'}</td> 
        <td><ChaserField onClick={this.handleChaserField.bind(this)} chaserDate={row.chaserETA}/></td> 
        <td><TrackingSentField onClick={this.handleTrackingSentField.bind(this)} trackingDate={row.customer_tracking}/></td> 
        <td><img title={row.img_title} src={row.img}/></td> 
       </tr> 
      ) 
     }); 
     return (
      <table className="table table-condensed table-hover"> 
       <thead> 
       <col width="40"/> 
       <col width="50"/> 
       <col width="230"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="53"/> 
       <tr> 
        <th></th> 
        <th>QTY</th> 
        <th>Supplier</th> 
        <th>WETA</th> 
        <th>CETA</th> 
        <th>Chase</th> 
        <th>Track' sent</th> 
        <th>Status</th> 
       </tr> 
       </thead> 
       <tbody> 
       <col width="40"/> 
       <col width="50"/> 
       <col width="230"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="53"/> 
       {rowData} 
       </tbody> 
      </table> 
     ) 
    } 
} 

Was will ich passieren wird, wenn ich auf dem div klicken, ist es Inhalt, um zu einem Datumseingabefeld zu wechseln, und wenn der Benutzer das Datum für das Speichern beendet hat, wenn er darauf klickt oder Enter drückt.

Wie kann das gemacht werden?

Answer 1

Sie haben bereits die meisten Dinge, an der richtigen Stelle. In der übergeordneten Komponente haben Sie in den Zustand der Wert editingChaser, die Sie als Stütze für das Kind passieren kann (zB <ChaserField editMode={this.state.editingChaser} ... />

Im Kind-Komponente können Sie die editMode prop entweder machen verwenden, was Sie jetzt haben, oder <input /> Feld (wenn editMode wahr ist).

Sie würden auch wollen wahrscheinlich den editierten Inhalt in der übergeordneten Komponente speichern, so müssen Sie einen onSave Rückruf übergeben Sie den bearbeiteten Wert in der übergeordneten Komponente zu aktualisieren. Sie Diesen Callback kann man zum Beispiel der onBlur Prop von der Eingabe zuweisen, oder der onClick einer Schaltfläche neben dem Eingang, wenn Sie die Änderungen bevorzugen explizit vom Benutzer "begangen" werden.

Answer 2

Man könnte so etwas wie (nicht getestet, aber man sollte die allgemeine Idee, um zu sehen sein können) tun:

import React from 'react'; 
import Moment from 'moment'; 

export default class ChaserField extends React.Component { 
    render() { 
     const { editing, toggle, chaserDate, update } = this.props; 

     let content = null; 

     if(!editing) { 
      // Viewing 
      const value = chaserDate != '0000-00-00' && chaserDate ? Moment(chaserDate).format('DD/MM/YYYY') : '-'; 
      content = <div onClick={toggle}>{value}</div>; 
     } else { 
      // Editing 
      // Not sure if you want this raw or formatted, adjsut as needed 
      content = <input onBlur={toggle} value={chaserDate} onChange={update} />; 
     } 

     return content; 
    } 
} 

// -- In parent ------------------------ 
// 
// Callback rigging 
toggle() { 
    this.setState({ 
     editing: !this.state.editing; 
    }) 
} 
updateDate(e) { 
    this.setState({ 
     chaserDate: e.target.value; 
    }) 
} 


// ... down in render 
const { editing, chaserDate } = this.state; 
const { updateDate, toggle } = this; 
<ChaserField editing={editing} toggle={toggle} update={updateDate} chaserDate={chaserDate} />