ReactJS Заменить содержание

Question

У меня есть поле, которое отображает дату, используя следующие компоненты:

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

Родитель:

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

То, что я хочу, чтобы это произошло, когда я нажмите на DIV, это содержимое, которое необходимо изменить в поле ввода даты, и когда пользователь завершит изменение даты его сохранения, когда он щелкнет его или нажмите Enter.

Как это можно сделать?

Answer 1

У Вас уже есть большинство вещей на месте. В родительском компоненте у вас есть в состоянии значение editingChaser, которое можно передать в качестве опоры для ребенка (например, <ChaserField editMode={this.state.editingChaser} ... />

В компоненте ребенка, вы можете использовать editMode опору либо делают то, что у вас есть сейчас, или <input /> поля (когда editMode верно).

вы бы также, вероятно, хотите сохранить отредактированное содержание в родительском компоненте, так что вам нужно передать onSave обратный вызов для обновления отредактированного значения в родительском компоненте. вы может назначить этот обратный вызов на onBlur опору ввода, например, или на кнопку onClick кнопки рядом с входом, если вы предпочитаете изменения чтобы быть явно «совершенным» пользователем.

Answer 2

Вы могли бы сделать что-то вроде (непроверенное, но вы должны быть в состоянии увидеть общую идею):

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