Is there any way to put a text input into cell? How to get the updated value?

[CrisLi]

I have a simple requirement. A table with some cell can be edited. I can display the cell as input text, but how to get the cell updated values?

I am using react-bootstrap to generate input text. I can't add ref to InputCell since it is stateless function components. Is there any way to make any cell editable?

import { Input } from 'react-bootstrap';

const InputCell = ({rowIndex, field, data, onChange, ...props}) => (
  <Cell {...props}>
    <form>
    <Row>
      <Col xs={8}>
        <Input type="text" bsSize="small" addonBefore="$" defaultValue={data[rowIndex][field]} />
      </Col>
    </Row>
    </form>
  </Cell>
);

[vinayaknagpal]

You can use onChange within Input to trigger an action. Alternatelively you can wrap your form in a stateful conponent and use that inside InputCell.