Question

我无法修改insertRow函数以将数据插入firebase。当用户点击handleSaveBtnClick（）时，我会参加。我已经花了最近两天来解决这个问题，请指出我正确的方向，非常感谢。

我能够连接并加载来自firebase的数据。

class IssueTrackerBody extends React.Component{
  constructor(props) {
  super(props);
  this.state = {
    issues:[]
  };

    //connect to database

    this.issueRef = database.ref().child('issues');

    //Click the save button; then the data will save to firebase

    this.handleSaveBtnClick = this.handleSaveBtnClick.bind(this);
}
//After the connect, what the state will do--gotdata

componentDidMount() {
  this.issueRef.on('value', this.gotData, this.errData, this.saveData);
}

//get the data from the firebase and push them out

  gotData = (data) => {
      let newIssue = []
      const issuedata = data.val();
      const keys = Object.keys(issuedata);

      for (let i = 0; i < keys.length; i++) {
        const k = keys[i];
        newIssue.push({
          id: issuedata[k].id, status: issuedata[k].status,
          issueDate: issuedata[k].issueDate,
          owner: issuedata[k].owner, expComDate: issuedata[k].expComDate,
          details: issuedata[k].details,
         completionDate: issuedata[k].completionDate,
         project: issuedata[k].project
        });
      }
      this.setState({issues: newIssue});
    }
        errData = (err) => {
    console.log(err);
    }

  formatType(cell) {
    return `${cell}`;
  }
  handleClick = (rowKey) => {
  alert(this.refs.table.getPageByRowKey(rowKey));
}


/** +New insertRow Header*/

createCustomModalHeader(onClose, onSave) {

  const headerStyle = {
       fontWeight: 'bold',
       fontSize: 'large',
       textAlign: 'center',
     };
return (
       <div className='modal-header' style={ headerStyle }>
         <h3>Report New Issue</h3>
       </div>
     );
   }

/** +New insertRow Footer*/

handleModalClose(onClose) {

    console.log('Close without saving the data');
    onClose();
  }
//I try to connect database and write It back

  handleSaveBtnClick = () => {
    const { columns, onSave } = this.props;
    const updateIssue = {};
    columns.forEach((column, i) => {
      updateIssue[column.field] = this.issueRef.push[column.field].value;
    }, this);
    // call the onsave issue
    onSave(updateIssue);
};


  createCustomModalFooter = (onClose, onSave) => {
    return (
        <div className='modal-footer' >
          <button className='btn btn-xs btn-info' onClick={ onClose }>Close</button>
          <button className='btn btn-xs btn-danger' onClick={ onSave }>Report</button>
        </div>
    );

  }


  render(){

   const options = {
         insertModalHeader: this.createCustomModalHeader,
         insertModalFooter: this.createCustomModalFooter,

       };


return (
      <BootstrapTable
        ref='table'
        data={ this.state.issues }
        cellEdit={ cellEditProp }
        exportCSV={ true }
        options={ options }
        pagination={true}
        insertRow
        search={true}>

        <TableHeaderColumn dataField='id' isKey={true} width='50'>ID</TableHeaderColumn>
        <TableHeaderColumn dataField='status'  editable={ { type: 'select', options: { values: issueStatus }, defaultValue: 'C' }}>Status</TableHeaderColumn>
        <TableHeaderColumn dataField='owner' tdStyle={ { whiteSpace: 'nowrap' } }>Owner</TableHeaderColumn>
        <TableHeaderColumn dataField='issueDate' dataFormat={ dateFormatter }>IssueDate</TableHeaderColumn>
        <TableHeaderColumn dataField='expComDate' >Expected Completed in Days</TableHeaderColumn>
        <TableHeaderColumn dataField='details' editable={ { type: 'textarea', defaultValue: 'Please write something'} } tdStyle={ { whiteSpace: 'normal' } } width='250'>Details</TableHeaderColumn>
        <TableHeaderColumn dataField='completionDate' editable={ { type: 'datetime' }} dataFormat={ dateFormatter }>Actual Completion Date</TableHeaderColumn>
        <TableHeaderColumn dataField='project' tdStyle={ { whiteSpace: 'nowrap' } }>Project</TableHeaderColumn>

      </BootstrapTable>
    );

  }
}
export default IssueTrackerBody

Answer 1

尝试从react-bootstrap-table

function onAfterInsertRow(row) {
  let newRowStr = '';

  for (const prop in row) {
    newRowStr += prop + ': ' + row[prop] + ' \n';
  }
  alert('The new row is:\n ' + newRowStr);
}

const options = {
  afterInsertRow: onAfterInsertRow   // A hook for after insert rows
};

class InsertRowTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products } insertRow={ true } options={ options }>
          <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}

如何使用react-bootstrap-table insertRow将数据插入firebase？

1 个答案: