2

找不到与我的问题相关的任何内容，希望有人有链接或正确答案。

目前正在学习 reactjs 并尝试创建一个 react-bootstrap-table 来显示一些数据。所以我遇到的问题是复选框。

我遇到的第一个问题是我需要先单击复选框的单元格，然后才能更改复选框的状态，这真的很烦人。我希望能够单击它以选中或取消选中它。第二个是如果您有一些不错的链接，我该如何制作它，以便该列refrences仅在选中复选框时才可编辑。我看到了一个似乎可以做到这一点的例子，但我没有设法让它发挥作用。

const criteriaCovered = [
    'Automated acceptance test',
    'Developer test',
    'Manual acceptance test',
    'Unit test'
]
const cellEditProp = {
    mode: 'click',
    blurToSave: true
};

function checkBoxFormat (cell,row)
{
   return (
       <div>
           <input type="checkbox" ref="criticalData" checked={cell} />
       </div>
   );
}

const element = (
    <div>
        <BootstrapTable data={ac} cellEdit={cellEditProp}>
            <TableHeaderColumn dataField='name' isKey={true}             
                width="25%">Name</TableHeaderColumn>
            <TableHeaderColumn dataField='changeType' editable={{type: 
                'select', options: {values: ['Functionality','Layout']}}} 
                width="15%">Change Type</TableHeaderColumn>
            <TableHeaderColumn dataField='criticalData' className="checkbox-
                cell" dataFormat={checkBoxFormat} editable={{type: 
                'checkbox', options: {values: 'true:false'}}} 
                dataAlign="right" width="15%">Critical 
                data</TableHeaderColumn>
            <TableHeaderColumn dataField='criteriaCoveredBy' editable=
                {{type: 'select', options: {values: criteriaCovered}}} 
                width="25%">Criteria covered by</TableHeaderColumn>
            <TableHeaderColumn dataField='refrences' 
                width="20%">Refrences</TableHeaderColumn>
        </BootstrapTable>
    </div>
);

ReactDOM.render(
    element,
    document.getElementById('root')
);

请原谅我的英文写作。这是我的第二语言，我还需要改进很多。

4

0 回答 0