如何在React with Material-UI中制作可编辑单元格

Question

如何在React with Material-UI中制作可编辑单元格 我正在尝试使用ui表格中的单元格进行编辑，但无法将输入字段聚焦，当我点击它时它会聚焦并且当我开始输入它时会失焦（css术语模糊）

屏幕截图：

代码：

 <TableRow id={index} key={index}>
                <TableRowColumn colSpan="1">{index + 1}</TableRowColumn>
                <TableRowColumn colSpan="2">{val.companyName}</TableRowColumn>
                <TableRowColumn colSpan="3">{val.companyAddress}</TableRowColumn>
                <TableRowColumn colSpan="1">
                    <Checkbox
                        disabled={val.companyIsVisited}
                        checked={val.companyIsVisited}
                        onCheck={() => { this.markCompanyVisited(key, val.companyIsVisited) }} />
                </TableRowColumn>
                <TableRowColumn colSpan="2">
                    {(val.companyVisitedDate) ? <Timestamp time={val.companyVisitedDate / 1000} /> : ""}
                </TableRowColumn>
                <TableRowColumn colSpan="1">
                    <Checkbox
                        checked={val.companySendStatus}
                        onCheck={(e) => { this.toggleSendstatus(key, e.target.companySendStatus) }} />
                </TableRowColumn>
                <TableRowColumn colSpan="2">
                    <TextField disabled={!val.companyIsVisited} value={val.companyRemarks} onChange={(e) => { this.giveRemarks(key, e.target.value) }} />
                </TableRowColumn>

                <TableRowColumn colSpan="2">
                    <FontIcon
                        className="material-icons"
                        label="Delete"
                        onClick={() => { this.deleteTodo(key) }}
                    >delete_forever</FontIcon>

                    <FontIcon
                        className="material-icons"
                        label="Edit"
                        tooltip="Edit"
                        onClick={() => { this.editTodo(key, val) }}
                    >mode_edit</FontIcon>
                </TableRowColumn>
            </TableRow>