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时，它的内容将更改为日期输入字段，当用户完成更改日期时，当他们点击它或点击时保存它输入

如何做到这一点？

Answer 1

你可以做类似的事情（未经测试，但你应该能够看到一般的想法）：

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

Answer 2

你已经拥有了大部分的东西。在父组件中，您处于状态值editingChaser，您可以将其作为道具传递给孩子（例如<ChaserField editMode={this.state.editingChaser} ... />

在子组件中，您可以使用editMode道具来渲染现在拥有的内容，或使用<input />道具（当editMode为真时）。

您可能还希望将已编辑的内容存储在父组件中，因此您需要传递onSave回调以更新父组件中的已编辑值。例如，您可以将该回调分配给输入的onBlur道具，或者将输入分配给输入旁边的按钮的onClick，如果您希望更改明确＆＃34;已提交＆＃34 ;由用户。

ReactJS替换内容

2 个答案: