Question

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

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

我遇到的第一个问题是我需要单击复选框的单元格才能更改复选框的状态，这真的很烦人。我希望能够单击它来检查或取消选中它。第二个是如果你有一些很好的链接我怎么做，所以只有选中复选框，列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')
);

请原谅我的英文写作。这是我的第二语言，我仍然需要对它进行很多改进。

Answer 1

线程可以关闭。正如tibuurcio所建议的那样，我现在正在使用组件和一个bootstrap-table，似乎工作得很好。然而，无法弄清楚如何修复复选框以仅显示复选框而不是值。我找到了一个很好的示例代码，用于使用带有组件的bootstrap-table。如果我找到链接，我会在这里链接。

react-bootstrap-table，checkbox和textfield

1 个答案: