reactjs - 如何在 react Material 表中禁用某些特定列的编辑？

Question

    import React from 'react';
    import MaterialTable from 'material-table';

    export default class DictionaryTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        columns: [
            {title:'Need state',field: 'NeedState',lookup: { 1: 'Fragrance', 2: 'Price', 3:'Formulation',4:'Technolgy'} },
            { title: 'Keyword extracted', field: 'keyword' },
            { title: 'Actual Keyword', field: 'actual_keyword' },
            { title: 'Map score', field: 'map_score', type: 'numeric' },
            { title: '6 month mentions', field: 'six_month_mention'},
        ],
        data: [
            { NeedState: 1, keyword: 'mango', actual_keyword: 'apple', map_score: .3 ,six_month_mention:234},
            { NeedState: 2, keyword: 'expensive', actual_keyword: 'price', map_score: .6 ,six_month_mention:45},
            { NeedState: 2, keyword: 'costly', actual_keyword: 'price', map_score: .43 ,six_month_mention:433},
            { NeedState: 3, keyword: 'chemical', actual_keyword: 'oil', map_score: .43 ,six_month_mention:68},
            { NeedState: 4, keyword: 'humidifier', actual_keyword: 'diffuser', map_score: .63 ,six_month_mention:987},
        ]
        }
    }


    render() {
        return (
        <MaterialTable
            title={<div style={!this.state.editable ? { color:'red', fontSize:"18px" } : { color:'red', fontSize:"12px" }}>
            <p class={!this.state.editable ? "bg-light text-dark br6 pa-5-10" : "negative-bg-button text-white br6 pa-5-10" }>
                {
                !this.state.editable ? 
                (
                    <span>Run request for - {this.state.request_name}</span>
                ):(
                    <span>
                    <i class="fa">
                        &#xf071;
                    </i> 
                    &nbsp; Caution: The dictionary is on edit mode. Any changes made will trigger a pipeline rerun with updated dictionary
                    </span>
                )
                }
                </p>
            </div>}
            columns={this.state.columns}
            columns={[
            ...this.state.columns.map(data => {
                return {
                    field: data.field,
                    title: data.title,
                    isEditable: data["actual_keyword"] = false,
                    render: rowData => 
                        (
                            <div style={ data.field === "map_score" ? { color : "red",borderRadius:'3px',paddingLeft:'10px' } : {} }> 
                            {
                            data.field === "map_score" ?
                            (
                                <span>
                                {
                                    rowData[data.field] > 0.8 ?
                                    <i class="fas fa-thermometer-full positive-color-font"></i>
                                    : rowData[data.field] > 0.6 ?
                                    <i class="fas fa-thermometer-half neutral-color-font"></i> :
                                    <i class="fas fa-thermometer-quarter negative-color-font"></i>
                                } 
                                </span>
                            ):(
                                <span>
                                {
                                    data.field === "NeedState" ?
                                    (
                                    <span>
                                        {rowData["show_needstate"]}
                                    </span>
                                    ):data.field === "show_needstate" ? (
                                    <span style={{ display:'none' }}>

                                    </span>
                                    ) : (
                                    <span>
                                        {rowData[data.field]}
                                    </span>
                                    )
                                }

                                </span>
                            )
                            } 
                            </div>
                        )
                };
                })
        ]}
            data={this.state.data}
            editable={{
            onRowAdd: newData =>
                new Promise(resolve => {
                setTimeout(() => {
                    resolve();
                    this.setState(prevState => {
                    const data = [...prevState.data];
                    data.push(newData);
                    return { ...prevState, data };
                    });
                }, 1);
                }),
            onRowUpdate: (newData, oldData) =>
                new Promise(resolve => {
                setTimeout(() => {
                    resolve();
                    if (oldData) {
                    this.setState(prevState => {
                        const data = [...prevState.data];
                        data[data.indexOf(oldData)] = newData;
                        return { ...prevState, data };
                    });
                    }
                }, 1);
                }),
            onRowDelete: oldData =>
                new Promise(resolve => {
                setTimeout(() => {
                    resolve();
                    this.setState(prevState => {
                    const data = [...prevState.data];
                    data.splice(data.indexOf(oldData), 1);
                    return { ...prevState, data };
                    });
                }, 1);
                }),
            }}
        />
        );
    }
    }

在这里我分享了我的完整组件。

这里我使用的是 React ma​​terial 表。

它工作正常，但我只想实现一个功能。

当我点击编辑时，所有行都处于可编辑状态。

但我想防止两列 six_month_mention 和 ma​​p_score 被编辑。

有什么办法可以实现吗？

请看

Answer 1

您可以使用 Material UI 中列的 editable 属性来禁用这些列进行编辑。为此，您必须设置 editable: 'never' 您已声明列的所有标题和字段属性的位置:

const columns = [
  { title: 'Department', field: 'department', editable: 'onAdd' },
  { title: 'Allocated', field: 'allocated', type: 'numeric' },
  { title: 'Used', field: 'used', editable: 'never', emptyValue: '-' }
];