react-bootstrap-table, checkbox and textfield

问题

couldn't find anything what relates to my problem hopefully someone has a link or the right answer.

Currently learning reactjs and trying to create a react-bootstrap-table to display some data. So the problem I have is with the checkBox.

The first problem I encounter is that I need to click the cell of the checkbox before I can change the state of the checkbox what is really anoying. I want to be able to just click it to check or uncheck it. The Second is if you have some nice link how I can make it so that the column refrences is only editable if the checkbox is checked. I saw an example which seemed to do that but I didn't manage to get it to work.

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

Excuse me for my english writing, please. It's my second language and I still need to improve on it a lot.

回答1:

The Thread can be closed. As suggested by tibuurcio I am using now components in combination with a bootstrap-table, what seems to be working fine. However couldn't figure out how to fix the checkboxes to only display a checkbox instead of the value. I found a nice example code for the usage of bootstrap-table with component. If I find the link I will link it here.

来源：https://stackoverflow.com/questions/44071560/react-bootstrap-table-checkbox-and-textfield

标签

reactjs

react-bootstrap-table